@charset "euc-jp";
* {
    margin: 0;
    padding: 0;
    line-height: 1;
}

#komeshindan .smp{display:none !important;}
#komeshindan .edoi{display: none;}
/*------------------------------------------------*/
/*     �١���     */
/*------------------------------------------------*/
body{
    font-family: 'Noto Sans JP', sans-serif;
	font-size: 100%;
	width: 100%;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
    min-width: 1000px}



    
    #komeshindan a{text-decoration: none;color: #000;}

    #komeshindan img{backface-visibility: hidden;-webkit-backface-visibility: hidden;width: 100%;}

    #komeshindan a img{border:none;}
    

    ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;list-style: none;font-weight: unset}

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

/*------------------------------------------------*/
/*     ���    */
/*------------------------------------------------*/

div.ques li,.coupon h4
{position: relative;}

div.ques li a,.coupon h4 a
{position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; white-space: nowrap;overflow: hidden;}


/*------------------------------------------------*/
/*     komeshindan     �١���     */
/*------------------------------------------------*/
#komeshindan{
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587948/image/komeshindan/back_ya.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    font-size: 14px;
    font-weight: 400;
    width: 100vw;
    height: 100vh;
    margin: auto;}



/*-------------------------------------------------------------------*/
/*     �ƥ�����     */
/*-------------------------------------------------------------------*/
/*��ʸ*/
#komeshindan p{line-height: 1.6em;     text-align: center;}
/*�����ȥ�*/
#komeshindan h1 img{width: auto;}
#komeshindan h1:hover img {opacity: 0.8;}

/*�礭����ʸ��*/
#komeshindan h3{
    font-size: 1.8rem;color: white;
     font-weight:800;
    line-height: 1.2;    margin: 1rem 0 2rem;}
#komeshindan h3 span{font-size: 0.8rem;font-weight: 500; }

/*��������ʸ��*/
#komeshindan h4{ font-size: 1rem;color: white; font-weight: 700;    padding: 0.5rem 0;}

/*����ä����������Ф�*/
#komeshindan h5{font-size: 1rem;text-align: center; font-weight: 500;}

.arrow_box{
    position:relative;
    background:#CABC75;
    padding:20px;
    text-align:left;
    color:#000000;
    font-size:14px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    margin: 0 0 1rem;
}

.arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(202, 188, 117, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:30px;
    border-right-width:30px;
    border-right-color:#CABC75;
    right:100%;
    top:30%;
}


/*-------------------------------------------------------------------*/
/*     �ᥤ��֥��å�     */
/*-------------------------------------------------------------------*/

#komeshindan #main{
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 100vh;
    overflow: overlay;
    margin: auto;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587948/image/komeshindan/back_pc.jpg);
    background-size: cover;
    background-color: #e5b87f;
    background-repeat: no-repeat;
    background-position: top;
}



#komeshindan #main .main2:nth-of-type(1){
   display: flex;
justify-content: center;
   /*align-items: center;
   height: calc(100vh - 150px);}*/}

   #komeshindan #main .main2:nth-of-type(2){
    display: flex;
 justify-content: center;
/*margin-top: -100vh;*/}

#komeshindan #main section#question{width: 100%;    max-width: 650px;}
#komeshindan #main section#answer{width: 100%;    max-width: 750px;}
/*-------------------------------------------------------------------*/
/*    ����    */
/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------*/
/*����ѡ���*/
/*-------------------------------------------------------------------*/

/*-----------------------------------*/
/*     ����    */
/*-----------------------------------*/
#komeshindan #question .edo{
    position: fixed;
    bottom: 2rem;
    right: 76%;
    transform-origin: center bottom;
    animation: yurayura 3s linear infinite;
}

@keyframes yurayura {
    0% , 100%{
        transform: rotate(1deg);
    }
    50%{
        transform: rotate(-1deg);
    }
  }

  #komeshindan #question .edo img{      width: 242px;}

/*-------------------------------------------------------------------*/
/*    �դ�����   */
/*-------------------------------------------------------------------*/

    
    /*�դ�����*/
#question div.com{
        text-align: left;
        border-radius: 10px;
        margin: 0 0 4vh;
        padding: 1.5rem;overflow: hidden; 

        box-sizing: border-box;
}

#question div.area_01{color: black;
    background-color: #fffffff2;}


    

#question div.area_02{
        background-color: #eb5522f2;}

#question div.area_02 div.icon_ques{    width: 165px; margin: auto;}

    /*����*/
#question div li{margin-bottom: 1rem;
    width: calc((100% - 2%) / 2 );
    padding: 1rem 0;
    text-align: center;
    float: left;
    box-sizing: border-box;
    background-color: #eb5522;
    border: 3px solid #cabc75;
    color: #ffffff;
}
    #question li p{    font-size: 1.2rem;font-weight: 800;color: #ffffff;}
    #question li:nth-of-type(odd){margin-right: 2%;}
    #question .area_02 li:hover {background-color: #cabc75;border:3px solid #cabc75;}

/*����*/
#question div.com h3{text-align: center;}
#question div.com h4{
    background-color: #eb5522;
    border-radius: 90px;
    margin: auto;
    margin-top: 1rem;
    text-align: center;
    width: 5rem;}

#question a.btn_st h3{
    position: relative;
    background-color: #e65d2c;
    padding: 1rem;
border-radius: 90px;}

#question a.btn_st h3:hover{background-color: #e65e2cd5;}




/*-------------------------------------------------------------------*/
/*���󥵡�*/
/*-------------------------------------------------------------------*/


#answer .ansblock .answer_waku{
        background-color: #eb5522f2;
    text-align: left;
    border: 12px black double;
    border-radius: 10px;
    padding: 2rem;
    margin: 0 0 4rem;
    box-sizing: border-box;}

/*�ȥåץ֥��å� ans_top*/
#answer .ans_top{width: 100%;display: flex;}
#answer .ans_top .edo{width: 200px;float: left;margin-right: 10px;    animation: yurayura 3s linear infinite;}
#answer .ans_top ul,#answer .ans_top dl{display: flex;justify-content: center;align-items: center;}

/*�ȥåץ֥��å��������Ҳ� .answer_item*/
#answer .ans_top .answer_item{ float: right;width: calc(100% - 10px - 200px);}
#answer .ans_top .answer_item h3{font-size: 2.2rem;margin: 1rem 0;}
#answer .ans_top .answer_item ul{display: flex;}
#answer .ans_top .answer_item ul p{ padding: 0 0 0.5rem;text-align: left;}
#answer .ans_top .answer_item ul p span{ padding: 0.5rem;margin-right: 1rem;
    background-color: #cabc75;
    color: black;
    display: inline-block;
    width: 4rem;
    text-align: center;}
    #answer .ans_top .answer_item ul li:first-of-type{width: 40%;}
    #answer .ans_top .answer_item ul li:last-of-type{width: 60%;}

#answer .ans_top .answer_item dl{display: flex;border: 1px solid #cabc75;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 1.2rem;}
#answer .ans_top .answer_item dl dd:first-of-type{width: calc(100% - 150px);text-align: center;}
#answer .ans_top .answer_item dt img{width: 150px;}
#answer .ans_top .answer_item dt img:first-of-type{  position: absolute;}
#answer .ans_top .answer_item dt img:last-of-type{    transform: rotate( -45deg );}
#answer .ans_top .answer_item dd.type_cook img{width:fit-content ;}
#answer .ans_top .answer_item dd.type_cook p{margin-top: 1rem;}
#answer .ans_top .answer_item .type{display: flex;margin-bottom: 0.5rem;align-items: center;}
#answer .ans_top .answer_item .type img{width: 63px;
    height: fit-content;}

    #answer .ans_top .answer_item + p{color: white;}

/*���ʥ饤��ʥå� ans_itemlist-*/
#answer .ans_itemlist{clear: both;}
#answer .ans_itemlist h4{   width: 50%;margin: 1rem auto 0;}
        #answer .ans_itemlist dl{
            display: flex;
            justify-content: center;
            align-items: center;}
            #answer .ans_itemlist dt{width: 50%;}
            #answer .ans_itemlist dd{width: 50%;}
            #answer .ans_itemlist dd p{
                padding:1rem 1rem;
                text-align: center;
                width: calc(100% - 8px - 20px);
                display: inline-block;
                position: relative;
                border-top: 1px solid white;
                color: white;}
            #answer .ans_itemlist dd a:last-of-type p{border-bottom: 1px solid white;}
            #answer .ans_itemlist dd p::after{
            content: '';
            width: 8px;
            height: 8px;
            margin-top: -5px;
            border-top: solid 1px #fff;   /* ���ߤǿ����Ѥ��Ƥ������� */  
            border-right: solid 1px #fff;   /* ���ߤǿ����Ѥ��Ƥ������� */  
            transform: rotate(45deg);
            position: absolute;
            top: 50%;
            right:15px;}
            #answer .ans_itemlist dd a:hover p::after{
                right:10px;
            }
            #answer .ans_itemlist ul{display: inline-block;}
#answer .ans_itemlist li{width: calc(100% / 2);float: left;box-sizing: border-box;       padding: 0 1rem 1rem;}
#answer .ans_itemlist li img{width: 100%;}
#answer .ans_itemlist li p{text-align: center;}

/*�����ݥ� coupon-*/

#answer .coupon{
    color:white;
    clear: both;
    position: relative;
    display: inline-block;
    width: 100%;}



#answer .coupon .c_edo{
    position: absolute;
    width: 273px;
    left: -59px;
    top: 0px;}

#answer .coupon .c_bn{
    float: right;
    width: 400px;
    padding: 2rem 0;
    margin: 1rem 0;
}

#answer .coupon h4{margin-top: 1rem;
    border-radius: 90px;
    border: 2px solid white;
    padding: 0.5rem;
    text-align: center;}

    #answer .coupon h4:hover{background-color: #ffffff;color: #eb5522;}

    #answer .coupon .i_okyaku{
          animation: move-y .2s infinite alternate ease-in-out;
            position: absolute;
    top: 5%;
    right: 111px;}
    @keyframes move-y {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(6px);
        }
      }

/*-------------------------------------------------------------------*/
/*����*/
/*-------------------------------------------------------------------*/

.com .back{position: relative;z-index: 11; text-align: center;    clear: both;}
.ansblock .back p{text-align: center;}
/*-------------------------------------------------------------------*/
/*�������˥ᡡ����*/
/*-------------------------------------------------------------------*/


.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: #251e17;
    bottom: 0;}

#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: white;}
#footer ul a:hover{color: #888888;}