@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 .pc{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;
	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: 2.8vw;
	font-weight: 400;
	margin: auto;
        overflow: hidden;
}


/*------------------------------------------------*/
/*     ヘッダー     */
/*------------------------------------------------*/
#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 / 5);
        margin: 1vw 1vw 3vw;
}
#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: 7.4vw;
        letter-spacing: 1px;
	    font-weight: 800;
}
#fence-flowchart h1 span{
        display: block;
        font-size: 52%;
}
#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;
	align-items: center;
}
#fence-flowchart main section#question,#fence-flowchart main section#answer{
        position: relative;
	width: 96%;
	margin:0 auto;
}


/*-------------------------------------------------------------------*/
/*共通*/
/*-------------------------------------------------------------------*/
/*戻るボタン*/
#fence-flowchart .back{
	position: relative;
        z-index: 11;
        clear: both;
        font-size: 3.5vw;
}
#fence-flowchart .back p{
        text-align: right !important;
        position: relative;
}
#fence-flowchart .back p span{
        position: absolute;
        right: 24vw;
}
#fence-flowchart .back p:hover{color:#e48e5b;}
#fence-flowchart .ansblock .back p{text-align: right !important;}

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

/*カネヤくん*/
#fence-flowchart .cock{position: absolute;}
#fence-flowchart .cock_01{
	width: 50%;
        top: -2%;
        right: -16%;
        opacity: 0;
}


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

/*スタート文*/
#start p.first{
        line-height: 7.4vw;
        font-size: 3.7vw;
	margin: 2% 0 0;
}

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

/*質問*/
#question div.area div.icon_ques{font-size: 7vw;}
#question .ques h3{
        font-size: 4.2vw;
        margin: 3vw auto 5vw;
        line-height: 6vw;
}
#question div ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
}
#question div ul li{
	width: 94%;
        padding: 4.5vw 0;
        background-color: #75786b;
        color: #ffffff;
        border-radius: 10px;
        margin: 0 auto 4%;
}
#question li p{
        font-size: 4vw;
        letter-spacing: 2px;
}

/*おすすめポイント*/
#question .area .point{
        border: 1px dotted;
        padding: 2.7vw;
        margin: 3% 0;
}
#question .area .point p.osusume{
        color: #e48e5b;
        font-weight: 600;
        font-size: 3.3vw;
}
#question .area .point p{
        text-align: left;
        margin-bottom: 1.8vw;
}
#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 16vw;
        padding: 5%;
	overflow: hidden; 
        box-sizing: border-box;
}

/*タイトル*/
#answer .ansblock .answer_item ul li h4{
        font-size: 3.7vw;
        margin: 2vw 0 3vw;
        font-weight: 500;
}
#answer .ansblock .answer_item ul li h5{
        font-size: 6vw;
        font-weight: 700;
        margin: 0 0 3.5vw;
        color: #e48e5b;
}

/*種類*/
#answer .ansblock .answer_item ul li dd.info{margin: 10px 0 0;}
#answer .ansblock .answer_item ul li dd.info p{
        margin: 1.2vw 0;
        letter-spacing: 1px;
}
#answer .ansblock .answer_item ul li dd.info p span{
        background: #75786b;
        color: #fff;
        padding: 1vw;
        margin: 0 auto 0.8vw;
        width: 42%;
        display: block;
        text-align: center;
        border-radius: 30px;
}

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

/*詳細はこちらボタン*/
#answer .ansblock dd.button{margin: 0 0 3vw;}
#answer .ansblock dd.button a,#answer .ansblock .osusume dd.button{
        display: block;
        background: #e48e5b;
        margin: 0 auto;
        color: #fff;
        padding: 5vw 0;
        border-radius: 10px;
        font-size: 4.5vw;
        letter-spacing: 2px;
        position: relative;
}
#answer .ansblock dd.button a span,#answer .ansblock .osusume dd.button span{
        position: absolute;
        font-size: 7vw;
        right: 4px;
        top: 5vw;
}

/*セット品ボタン*/
#answer .ansblock dd.set a{
        background: #fff;
        border: solid 1px;
        color: #e48e5b;
        box-sizing: border-box;
        width: 85%;
        font-size: 3.5vw;
        padding: 4.2vw 0;
}
#answer .ansblock dd.set a span{
        font-size: 6vw;
        right: 3px;
        top: 4vw;
}

/*見出し*/
#answer .ansblock .osusume{margin: 7vw 0 0;}
#answer .ansblock .osusume h7{
	font-size: 4vw;
        font-weight: 700;
        letter-spacing: 2px;
}
#answer .ansblock .osusume ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
        margin: 4vw 0 0;
        flex-wrap: wrap;
}
#answer .ansblock .osusume ul li{
        width: calc(100% / 2 - 8px);
        box-sizing: border-box;
        margin: 0 0 6vw;
}
#answer .ansblock .osusume dd.point{
        margin: 5% 0 0;
        font-weight: 600;
        color: #e48e5b;
}
#answer .ansblock .osusume dd.name{
        margin: 3% 0;
        line-height: 3.8vw;
        font-size: 3vw;
        height: 7.8vw;
}
#answer .ansblock .osusume dd.button{
        padding: 3vw 0;
        font-size: 3vw;
        border-radius: 6px;
}
#answer .ansblock .osusume dd.button span{
        font-size: 5vw;
        right: 5px;
        top: 27%;
}

/*-------------------------------------------------------------------*/
/*　　アニメ　　　*/
/*-------------------------------------------------------------------*/
.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 1rem;}
footer ul a{color: #fff;}