@charset "UTF-8";
/* CSS Document */

body{ margin:0; padding:0; -webkit-text-size-adjust: 100%;}

* {font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

#main-area{ width:100%; margin:0; padding:0;}

#pc-kanban{ 
width:100%;
height:auto;
border-bottom:2px solid #333;
margin-bottom:15px;
text-align:center;
background-color:#eee;
}
#pc-kanban img{ 
width:180px;
}

#top-head{ display:none;}


/* 特集ページのデザイン */

h1{ 
font-size:35px;
text-align:center;
border-bottom:1px solid #333;
margin-bottom:45px;
}

.g-f{ 
background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/gf-back.jpg) no-repeat;
background-size:contain;
margin-top:30px;
margin-bottom:30px;
height:900px;
width:100%;
position:relative;
margin:0 auto;
}

.g-f img{ 
position:absolute;
bottom:220px;
width:88% !important;
left:60px;
}


.hyaku{ font-size:80px; padding-right:5px;}
.youten{ background:#FF9;}

h2{ 
border:1px solid #333;
text-align:center;
padding:3px 10px;
font-size:21px;
border-left:7px solid #333;
padding-left:8px;
display:inline-block;
margin-left:20px;
}

#e-box{ 
width:100%;
height:100%;
margin:0 auto;
padding-bottom:50px;
background-color:#F8F8F8;
}

.e-box2{ 
width:950px;
height:100%;
margin:0 auto;
font-size:17px;
color:#222;
line-height:2.8em;
padding:5px;
text-align:left;
padding-bottom:80px;
}

.e-box2 img{ 
width:100%;
margin-top:20px;
margin-bottom:30px;
animation: horizontal 4s ease-in-out infinite alternate;
animation: vertical 4s ease-in-out infinite alternate;
}


@keyframes horizontal {
    0% { transform:translateX( -12px); }
  100% { transform:translateX(  4px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  3px); }
}

.e-box3{ 
width:940px;
height:auto;
margin:0 auto;
font-size:17px;
color:#222;
line-height:2.8em;
padding:10px 20px;
text-align:left;
background-color:#fff;
border-radius:10px;
margin-bottom:100px;
padding-bottom:50px;
}

.e-box3 img{ 
width:100%;
margin:0 auto;
margin-top:20px;
margin-bottom:30px;
}

.e-box3 a{ 
color:#C00;
text-decoration:underline;
font-weight:bold;
}

.e-box3 a:hover{ 
color:#222;
text-decoration:none;
}

.e-box3 ul{ 
width:65%;
margin:0 auto;
}

.e-box3 li{ 
list-style:none;
background:#222;
margin-top:40px;
text-align:center;
display:block;
padding:5px 10px;
margin-bottom:30px;
border-radius:5px;
-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out;
}

.e-box3 li a{ 
text-decoration:none !important;
color:#fff !important;
}

.e-box3 ul li:hover{ 
background:#36C;
color:#fff !important;
-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out;
}

.tencho{ 
width:630px !important;
}


.bottoms {
    background-color: #F8F8F8;
    height: 100%;
    position: relative;
    width: 100%;
}
.bottoms:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 80px solid transparent;
    border-top-color: #F8F8F8;
    top: 100%;
    left: 47%;
}

.bottoms1 {
    background-color: #6F9EBF;
    height: 100%;
    position: relative;
    width: 100%;
}
.bottoms1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 80px solid transparent;
    border-top-color: #6F9EBF;
    top: 100%;
    left: 47%;
}



.bottoms2 {
    background-color: #699;
    height: 100%;
    position: relative;
    width: 100%;
}
.bottoms2:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 80px solid transparent;
    border-top-color: #699;
    top: 100%;
    left: 47%;
}


#e-cont{ 
background:#6F9EBF;
width:100%;
height:100%;
}


#e-cont1{ 
background:#699;
width:100%;
height:100%;
}

.copy{ margin:0 auto; font-size:11px; padding:0 8px;}




#goTop2{ position:fixed; bottom:35px; right:30px; z-index:99999;}
#goTop2 a{ display:block; width:60px; height:60px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; background:url(https://www.rakuten.ne.jp/gold/hana-online/sp/img/dl-top.png) no-repeat center; background-size:20px 20px; text-indent:-99999px; opacity:0.9; -moz-opacity:0.9; -khtml-opacity: 0.9; background-color:#444;}




/* スマホ用 ブレークポイント */

@media screen and (max-width: 899px) { 

/* 特集ページのPC用看板の処理 */
#pc-kanban{
 display:none;
}



/* 特集ページのデザイン */
.bottoms:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 35px solid transparent;
    border-top-color: #F8F8F8;
    top: 100%;
    left: 40%;
}

.g-f{ 
display:none;
}

.g-f-sp{ 
display:block;
}

.bottoms1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 35px solid transparent;
    border-top-color: #6F9EBF;
    top: 100%;
    left: 40%;
}


.bottoms2:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 35px solid transparent;
    border-top-color: #699;
    top: 100%;
    left: 40%;
}


 h1{ font-size:95%; white-space:nowrap; margin-bottom:0;}
 h2{ font-size:75%; white-space:nowrap; margin-left:-10px;}
 .hyaku{ font-size:30px;}

#e-box{
 margin-top:58px;
 width:100%;
}

.e-box2{
 width:92%;
 height:100%;
 padding:10px;
 font-size:15px;
 padding-bottom:40px;
}


.e-box3{
 width:83%;
 height:100%;
 font-size:90%;
 padding:10px 20px;
 margin-top:-50px;
}

.e-box3 p{
 font-size:14px;
 line-height:2.5em;
}


.e-box3 ul{
 width:80%;
 margin-left:0;
}


.e-box3 li{
 margin-top:0;
 white-space:nowrap;
 display:block;
}


.tencho{
 width:100% !important;
}




#goTop2{ position:fixed; bottom:35px; right:10px; z-index:99999;}
#goTop2 a{ display:block; width:40px; height:40px; background-size:15px 15px;}


/* トグルメニュー */
.inner {
    width: 980px;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */
#top-head {
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0 0;
    line-height: 1;
    z-index: 999;
 display:block;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}

#top-head .logo{
 position:absolute;
 left:0;
}
#top-head .logo img{
 width:120px;
 margin-top:-15px;
 margin-left:-10px;
}
#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
 width:100%;
}
#global-nav ul li a {
    padding: 0 30px;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 55px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 40px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #333;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 68px;
        z-index: 999;
  border-bottom:1px solid #333;
  opacity:0.9;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
 
 #top-head img{ 
 width:95px;
 position:absolute;
 left:0;
 top:5px;
 }
 

    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -480px;
        background: #333;
        width: 100%;
        text-align: center;
  border-bottom:1px solid #000;
        padding:0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
  overflow-y: scroll;
  overflow-x:hidden;
  height:400px;
  -webkit-overflow-scrolling: touch;
  
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
  padding:0;
  width:100%;
    }
     #global-nav li {
        float: left;
  display:block;
  height: 57px;
    }
 
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100% ;
        display: block;
        color: #fff;
  border-top:1px solid #999;
        padding: 18px 0 0 10px;
  font-size:95%;
  text-align:left;
    }
    #nav-toggle {
        display: block;
    }
 
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
  margin-top:-8px;
    }
 
/* 検索窓 */
.artop{margin-top: -15px;}
article {margin-bottom: 5px;}
article .search{ background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/txca310.jpg) repeat; padding:15px 10px; margin-bottom:-5px;}
article .search p{text-align: left; }
article form{ width:100%;  }
article form .searchBox { width: 60%; height: 21px; border: 1px solid #422D16; padding:5px; margin:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.searchButton{
border:none;
background-color: #422D16;
font-size:14px;
color:#fff;
width:71px;
height:31px;
-webkit-border-radius: 7px;
 -webkit-border-radius: 7px;
cursor:pointer;
}
article .search .keywords{font-size:11px;}



}
.g-f-sp {display:block;
}
.e-box31 {width:940px;
height:auto;
margin:0 auto;
font-size:17px;
color:#222;
line-height:2.8em;
padding:10px 20px;
text-align:left;
background-color:#fff;
border-radius:10px;
margin-bottom:100px;
padding-bottom:50px;
}
.e-box31 { width:83%;
 height:100%;
 font-size:90%;
 padding:10px 20px;
 margin-top:-50px;
}
.tencho1 {width:630px !important;
}
.tencho1 { width:100% !important;
}