@charset "UTF-8";


/*----------------------
全体、リセットの設定
----------------------*/


html{
    font-size:62.5%;/*単位remに対してこの数値を入れると、かなりよい基準値になる。基準値に設定*/
}


body{
    max-width:100%;/*375px;*/
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    background:url(../images/backgroundpaper.png);
    background-size:50%;/*効いてなさそう*/
    color:#54260C;/*元のカラー#221714*/
    /*font-weight:bold;/*太文字にするか検討中*/
    overflow:hidden;/*はみ出し部分を隠す記述*/
    font-weight:700;
}


*{
    margin:0;
    padding:0;
}

li{list-style:none;}

a{
    text-decoration: none;
    color:#54260C;
}


/*----------------------
header
----------------------*/

header{
    max-width:92%;
    /*background:#FFFFCC;*/
    margin:0 5px;
    margin:10px auto 25px;
}

nav{
    display:flex;
    justify-content:space-between;
}

nav img{
    height:40px;
    max-width:auto;
}

nav .smartphone_logo img{
    height:50px;
    max-width:auto;
}


nav img{
transition: all 0.1s;
}

nav .smartphone_logo img:hover{
    transform: translate(0px,0px);/*アイコンだけ動かすか、文字も一緒に動かすか検討中*/
}

nav img:hover{
    transform: translate(0px,-5px);/*アイコンだけ動かすか、文字も一緒に動かすか検討中*/
}

nav .pc{
    display:none;/*-----pc幅の時だけ出るメニューは消す------*/
}

nav ul{
    text-align:center;
    font-size:1rem;
}


nav ul:last-child{
    display:block;
}



nav .logo img{
    width:111px;
    height:auto;
}

/*----------------------
main_v
----------------------*/

#main_v{
    /*background:#CCFFCC;*/
    max-width:100%;
    margin:0 auto;
}

  .slider {/*☆jQuery適用☆*/
    width: 90%;
    margin: 5px auto 45px;
      
  }

  .slick-slide img {/*☆jQuery適用☆*/
    width: 350px;/*元320px*/
    height: auto;
    /*margin-left:2.5%;*/
      margin:0 auto;
  }

  .mypattern{/*☆jQuery適用☆*/
    width: 100%;
  }

  .mypattern .slick-slide{/*☆jQuery適用☆*/
    margin: 5px;
  }


/*----------------------
section
----------------------*/

section{
    /*background:#FFCCFF;*/
    display:flex;
    width:90%;/**適当**/
    margin:0px auto 30px;
    font-size:1.5rem;
}


.section_text{
    margin:0 auto;
    text-align:center;
}

/*section p{
    text-align:center;
}*/

.moyou img{
    width:40px;
}

/*----------------------
contents
----------------------*/

#contents{
    /*background:#CCCCFF;*/
    display:block;
}

#leftbox{/*★*/
    width:340px;/*仮の数値*/
    height:330px;/*仮の数値*/
    background:url(../images/news.png) no-repeat;
    background-size:334px auto;/*仮サイズ*/
    background-position:-1px 66px;
    position:relative;/*positionを固定する際の親要素に指定*/
    /*background:pink;*/
    margin:0 auto;
}


#leftbox:hover{/*★*/
    background:url(../images/news_hover.png) no-repeat;
    background-size:334px auto;
    background-position:-1px 66px;
}


.left_textbox{/*★*/
    width:270px;/**適当**/
    height:100px;
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:130px;
    left:25px;
}



.left_textbox p{/*★*/
    font-size:1.4rem;
    border:solid 1px #221714;
    border-radius:5px;
    padding:5px 6px;
    text-align:center;
    display:block;
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:-32px;
    right:0px;
}



.left_textbox p:hover{/*★*/
    border:solid 1px #FF9900;
    color:#FF9900;
}


.left_textbox table{/*★*/
    font-size:1.3rem;/**てきとうなので後でチェックする**/
    width:95%;
    height:90%;
    position:relative;
    top:10px;
    left:14px;
    display:block;
    overflow-y:scroll;
}


.left_textbox tr{/*★*/
    display:block;
    width:100%;
    /*background:pink;*/
    padding-bottom:2.2%;
}


.left_textbox th{/*★*/
    margin-right:15px;
    vertical-align:top;
    font-weight:500;
}

.left_textbox td{/*★*/
    width:60%;
}


.left_textbox td a{/*★*/
    border-bottom: dashed 2px #87CEFA;
}

.left_textbox td a:hover{/*★*/
    color:green;
}

#rightbox{/*★*/
    width:334px;/*仮*/
    height:350px;
    background:url(../images/kondate_photoflame.png) no-repeat;
    background-size:250px auto;
    background-position:30px 76px;
    position:relative;/*positionを固定する際の親要素に指定*/
    margin:0 auto;
}

#rightbox .kondate_text img{/*★*/
    width:190px;
}


#rightbox .kondate_text{/*★*/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:11px;
    left:40px;
    z-index:10px;
}

#rightbox .kondate_tape img{/*★*/
    width:74px;
}


#rightbox .kondate_tape{/*★*/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:60px;
    left:0px;
    z-index:1;
}


#rightbox .kontate_photo img{/*★*/
    width:231px;
}


#rightbox .kontate_photo img:hover{/*★*/
    transform:rotate(-2deg);
}

#rightbox .kontate_photo{/*★*/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:83px;
    left:38px;
}


#rightbox .kondate_illustration img{/*★*/
    width:150px;
}


#rightbox .kondate_illustration img:hover{/*★*/
    transform:rotate(5deg);
}

#rightbox .kondate_illustration{
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:110px;
    left:186px;
    z-index:10;
}

/*----------------------
menu_link
----------------------*/

#menu_link{
    width:90%;/*サイズ検討可能*/
    margin:0px auto 0;
    /*background:#99CCFF;*/
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:1.4rem;
}

#menu_link ul{
    text-align:center;
    margin-bottom:40px;
}


#menu_link ul img{
    height:130px;
    width:auto;
}



#menu_link ul img:hover{
    transform:rotate(-5deg);
    
}

/*----------------------
footer_decoration
----------------------*/

#footer_decoration{
    height:36.5px;
    background:url(../images/flag.png) repeat-x;
    background-size:12%;/**適当な数値**/
    margin-top:40px;
}


/*----------------------
footer
----------------------*/

footer{
    /*background-color:pink;*/
    background-size:100%;
    background-position:bottom;
    margin-top:15px;
    background:url(../images/footer_pattern.png) no-repeat;
    background-size:200% auto;
}


#footer_contents{
    width:95%;/*仮サイズ*/
    margin:0 auto;
    display:flex;
    /*background:pink;*/
}

.footer_logo{
    margin:10px 10px 0 10px;/*仮サイズ*/
}
    
.footer_logo img{
    width:68px;/*仮サイズ*/
}
    

.footer_info img{
    width:180px;/*仮サイズ*/
}

.footer_address{
    display:block;
}

.footer_address p{
    font-size:1.2rem;/*仮サイズ*/
}

footer .map_btn a{
    font-size:2rem;/*仮サイズ*/
    border:solid 1px #221714;
    border-radius:5px;
    text-align:center;
    padding:3px 59px;
    display:block;
    margin-top:7px;
}

footer .map_btn a:hover{
    border:solid 1px #FF9900;
    color:#FF9900;
}



.footer_copy{
    text-align:center;
    font-size:1rem;
}


/*----------------------
top_btn
----------------------*/

#top_btn{
    position:fixed;
    bottom:40px;
    right:1px;
    z-index:999;
}/*位置が微妙*/

#top_btn img{
    width:100px;
}


#top_btn:hover{
    transform: translate(0px,-10px);
}


/**--------------------------------------------
スマホ～タブレット①
--------------------------------------------**/

@media screen and (min-width:500px){
/**----------------------
footer
----------------------**/

footer{
    /*background-color:pink;*/
    width:100%;
    margin:0 auto; /*効いてない*/
    background:url(../images/footer_pattern.png) no-repeat;
    background-size:100% auto;
}


#footer_contents{
    width:400px;/*仮サイズ*/
    margin:0 auto;
    display:flex;
    /*background:gray;*/
}

.footer_logo{
    margin:10px 20px 0 10px;/*仮サイズ*/
}
    
.footer_logo img{
    width:70px;/*仮サイズ*/
}
    

.footer_info img{
    width:250px;/*仮サイズ*/
}

.footer_address{
    display:block;
}

.footer_address p{
    font-size:1.5rem;/*仮サイズ*/
}

footer .map_btn a{
    font-size:12pt;/*仮サイズ*/
    border:solid 1px #221714;
    border-radius:5px;
    text-align:center;
    padding:3px 59px;
    display:block;
    margin-top:7px;
}


.footer_copy{
    text-align:center;
    font-size:1rem;
}
}

  




/**--------------------------------------------
スマホ～タブレット②
--------------------------------------------**/
@media screen and (min-width:600px){/*元700px*/
    #menu_link{
    width:70%;/**アバウト**/
    margin:10px auto 0;
    }
}/**ここまで**/


/**--------------------------------------------
タブレット
--------------------------------------------**/
@media screen and (min-width:800px){/*元700px*/


/**----------------------
header
----------------------**/

header{
    width:90%;
    margin:20px auto 30px;
}

    
nav .pc{
    display:block;/*-----pc幅の時だけ出るメニューは消す------*/
}


nav ul{
    font-size:1.2rem;
}

nav ul.smartphone_logo img{
    height:70px;/*てきとう*/
    width:auto;
}
    
nav ul:last-child{
    display:none;/*-----pc幅の時だけメニューの「MENU」は消す------*/
}


nav img{
    height:45px;
}

/**----------------------
main_v
----------------------**/
    #main_v img{
    height:300px;
    width:auto;
}

#main_v{
    /*background:#CCFFCC;*/
    max-width:100%;
    background:url(../images/mainv_bckground.png) no-repeat;
    background-size:450px auto;
    background-position:center;
}

    
/**----------------------
section
----------------------**/

section{
    width:60%;
    margin:0px auto 50px;/*効いてない*/
}

.section_text{
        margin:0 auto;
        font-size:1.8rem;/*適当なサイズ*/
}
    

    
/**----------------------
contents
----------------------**/

#contents{
    /*background:gray;*/
    width:98%;/**アバウトな計測数値**/
    margin:0 auto;
    display:flex;
    justify-content:space-between;
}

  

#leftbox{/**★**/
    width:350px;/*仮の数値*/
    height:auto;/*仮の数値*/
    background:url(../images/news.png) no-repeat;
    background-size:350px auto;
    background-position:top 40px left 0px;
    position:relative;/*positionを固定する際の親要素に指定*/
    margin:0;
    /*background:pink;*/
}

#leftbox:hover{/**★**/
    background:url(../images/news_hover.png) no-repeat;
    background-size:350px auto;
    background-position:top 40px left 20px;
}


.left_textbox{/**★**/
    width:270px;/**適当**/
    height:100px;
}

    
.left_textbox table{/**★**/
    font-size:1.2rem;/**てきとうなので後でチェックする**/
    width:100%;
    height:90%;
    position:relative;
    top:-11px;
    left:27px;
    display:block;
    overflow-y:scroll;
}
    
.left_textbox tr{/**★**/
    width:90%;
}
        

.left_textbox p{/**★**/
    border:solid 1px #221714;
    border-radius:5px;
    /*padding:5px 5px;*/
    text-align:center;
    display:block;
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:-53px;
    right:-25px;
}

    
#rightbox{/**★**/
    width:442px;
    height:300px;
    background:url(../images/kondate_photoflame.png) no-repeat;
    background-size:271px auto;
    background-position:41px 70px;
    position:relative;/*positionを固定する際の親要素に指定*/
    margin:0;
    /*background:lightblue;*/
}

#rightbox .kondate_text img{/**★**/
    width:195px;
}



#rightbox .kondate_text{/**★**/
    position:relative;
    top:10px;
    left:38px;
    z-index:10px;
}

#rightbox .kondate_tape img{/**★**/
    width:80px;
}


#rightbox .kondate_tape{/**★**/
    position:relative;
    top:7px;
    left:10px;
    z-index:1;
}


#rightbox .kontate_photo img{/**★**/
    width:249px;
}


#rightbox .kontate_photo img:hover{/**★**/
    transform:rotate(-2deg);
}

#rightbox .kontate_photo{/**★**/
    position:relative;
    top:-38px;
    left:50px;
}


#rightbox .kondate_illustration img{/**★**/
    width:251px;
}


#rightbox .kondate_illustration img:hover{/**★**/
    transform:rotate(5deg);
}

#rightbox .kondate_illustration{
    position:relative;
    top:-254px;
    left:170px;
    z-index:10;
}

    
/**----------------------
menu_link まだ
----------------------**/

#menu_link{
    width:75%;/**アバウト**/
    margin:10px auto 0;
    /*background:#99CCFF;*/
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:16pt;
}

#menu_link ul{
    text-align:center;
    margin-bottom:40px;
}


#menu_link ul img{
    height:180px;
    width:auto;
}



#menu_link ul img:hover{
        transform:rotate(-5deg);
}
    

    
/**----------------------
footer
----------------------**/
    
footer{
    /*background-color:pink;*/
    width:100%;
    margin:0 auto; /*効いてない*/
    background:url(../images/footer_pattern.png) no-repeat;
    background-size:100% auto;
}


#footer_contents{
    width:50%;/*仮サイズ*/
    margin:0 auto;
    display:flex;
    /*background:pink;*/
}

.footer_logo{
    margin:10px 20px 0 10px;/*仮サイズ*/
}
    
.footer_logo img{
    width:80px;/*仮サイズ*/
}
    

.footer_info img{
    width:340px;/*仮サイズ*/
}

.footer_address{
    display:block;
}

.footer_address p{
    font-size:1.8rem;/*仮サイズ*/
}

footer .map_btn a{
    font-size:12pt;/*仮サイズ*/
    border:solid 1px #221714;
    border-radius:5px;
    text-align:center;
    padding:3px 59px;
    display:block;
    margin-top:-3px;
}


.footer_copy{
    text-align:center;
    font-size:1rem;
}
}/**--------------------タブレット幅用の記述ここまで-----------------------**/


/***--------------------------------------------
PC
--------------------------------------------***/
@media screen and (min-width:1024px){

    
body{
    max-width:100%;
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    background:url(../images/backgroundpaper.png);
    background-size:50%;/*効いてなさそう*/
    color:#54260C;/*元のカラー#221714*/
    /*font-weight:bold;/*太文字にするか検討中*/
}

    
    
/***----------------------
header
----------------------***/

header{
    width:960px;
    margin:20px auto 30px;
}

nav ul{
    font-size:1.6rem;
}

nav ul.smartphone_logo img{
    height:90px;/*てきとう*/
    width:auto;
}


nav img{
    height:58.5px;
}

    
/***----------------------
main_v
----------------------***/

#main_v{
    /*background:#CCFFCC;*/
    max-width:100%;
    background:url(../images/mainv_bckground.png) no-repeat;
    background-size:593px auto;
    background-position:center;
}

#main_v img{
    height:409.5px;
    width:auto;
    /*margin-left:75px;/*キービジュアルが中央に来るように位置調整*/
}


    
    
/***----------------------
section
----------------------***/

section{
    /*background:pink;*/
    width:60%;
    margin:0px auto 50px;/*効いてない*/
    line-height:4rem;
}

.section_text{
        margin:0 auto;
        font-size:2.1rem;/*元2.1rem適当なサイズ*/
}
    
/*.smartphone_br{
        display:none;
}*/
    
    
/***----------------------
contents
----------------------***/

#contents{
    width:1010px;/**アバウトな計測数値**/
    margin:0 auto;
    display:flex;
    justify-content:space-between;
}


#leftbox{/***★***/
    width:492px;/*仮の数値*/
    height:350px;/*仮の数値*/
    background:url(../images/news.png) no-repeat;
    background-size:480px auto;
    background-position:10px 20px;
    position:relative;/*positionを固定する際の親要素に指定*/
}

#leftbox:hover{/***★***/
    background:url(../images/news_hover.png) no-repeat;
    background-size:469px auto;
    background-size:480px auto;
    background-position:10px 20px;
}


.left_textbox{/***★***/
    width:370px;/**適当**/
    height:150px;
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:150px;
    left:75px;
}


.left_textbox p{/***★***/
    width:50%;/*後で消す*/
    font-size:1.8rem;
    padding:6px 7px;
    border:solid 1px #221714;
    border-radius:8px;
    text-align:center;
    display:block;
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:-75px;
    right:0px;
}

    
.left_textbox table{/***★***/
    font-size:1.8rem;/**てきとうなので後でチェックする**/
    width:100%;
    height:85%;
    position:relative;
    top:-15px;
    left:0px;
    display:block;
    overflow-y:scroll;
}
    
.left_textbox tr{/**★**/
    width:100%;
}
    

    
#rightbox{/***★***/
    width:492px;
    height:350px;
    background:url(../images/kondate_photoflame.png) no-repeat;
    background-size:321px auto;
    background-position:41px 86px;
    position:relative;/*positionを固定する際の親要素に指定*/
}

#rightbox .kondate_text img{/***★***/
    width:245px;
}



#rightbox .kondate_text{/***★***/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:10px;
    left:38px;
    z-index:10px;
}

#rightbox .kondate_tape img{/***★***/
    width:120.5px;
}


#rightbox .kondate_tape{/***★***/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:65px;
    left:0px;
    z-index:1;
}


#rightbox .kontate_photo img{/***★***/
    width:299.5px;
}


#rightbox .kontate_photo img:hover{/***★***/
    transform:rotate(-2deg);
}

#rightbox .kontate_photo{/***★***/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:94.5px;
    left:50px;
}


#rightbox .kondate_illustration img{/***★***/
    width:301px;
}


#rightbox .kondate_illustration img:hover{/***★***/
    transform:rotate(5deg);
}

#rightbox .kondate_illustration{/***★***/
    position:absolute;/*親である[relative]を基準にpositionを固定*/
    top:0px;
    left:190px;
    z-index:10;
}

    
    
    
/***----------------------
menu_link
----------------------***/

#menu_link{
    width:776px;/**アバウトな計測数値**/
    margin:50px auto 20px;
    /*background:#99CCFF;*/
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:2rem;
}

#menu_link ul{
    text-align:center;
    margin-bottom:40px;
}


#menu_link ul img{
    height:217px;
    width:auto;
}



#menu_link ul img:hover{
        transform:rotate(-5deg);
}


    
/***----------------------
footer
----------------------***/
footer{
        background:url(../images/footer_pattern.png) no-repeat;
        background-size:93% auto;
}    
    
#footer_contents{
    width:800px;/**適当な数値**/
    margin:0 auto 0;
    padding-top:35px;
}
    
    
.footer_logo{
    margin:0 30px 0 0;/*仮サイズ*/
}

    
.footer_logo img{
    width:111px;/*仮サイズ*/
}
    
    
.footer_address{
    display:flex;
    }
    
    
.footer_address p{
    font-size:2.2rem;
    margin-top:5px;
}

footer .map_btn{
    margin-left:9px;
    }

footer .map_btn a{
    font-size:1.8rem;
    padding:5px 10px 5px 10px;
    border-radius:8px;
}/*marginが効かない*/

.footer_info img{
    width:383.816px;/*仮サイズ*/
}

    
.footer_copy{
    font-size:1.6rem;
}
    
    
/***----------------------
top_btn
----------------------***/

#top_btn{
    position:fixed;
    bottom:1px;
    right:1px;
    z-index:999;
}/*位置が微妙*/
    
#top_btn img{
    width:157.5px;
}


    
}/***--------------------pc幅用の記述ここまで-----------------------***/


/**--------------------------------------------
PC~
--------------------------------------------**/
@media screen and (min-width:1220px){/*元700px*/
    
.smartphone_br{
        display:none;
}

}/**ここまで**/