/* only subpage */
#header {
/*
    height:28vh;
    background:url("../images/sub_bg.jpg") no-repeat center;
    background-size:cover;
    position:relative;
*/
}

/*
#header .color {
    position:absolute;
    right:0;
    top:0;
    width:25%;
    height:10px;
}
*/

.color.yellow {
    background:#f8ca00;
}

.color.orange {
    background:#e97f02;
}

.color.purple {
    background:#490a3d;
}

.color.wine {
    background:#bd1550;
}

.color.green {
    background:#20967e;
}


/*
.lastone {
    position:absolute;
    right:5%;
    top:10%;
}

.lastone a {
    font-size:18px;
    color:#666666;
    font-weight:500;
    text-decoration: none;
}
*/

.sub_btn {
    padding:10px;
    background:#333;
}

.sub_btn:first-child.on {
    background:#f8991b;
}

.sub_btn:nth-child(2).on {
    background:#ff5001;
}

.sub_btn:nth-child(3).on {
    background:#490a3d;
}

.sub_btn:nth-child(4).on {
    background:#bd1550;
}

.sub_btn:last-child.on {
    background:#1f967e;
}


.sub_btn a {
    display:block;
    font-size:16px;
    color:white;
    line-height:20px; 
    text-decoration: none;
}


#header .webzine_title {
/*
    position:absolute;
    top:43%;
    transform:translateY(-50%);
    right:50px;
*/
}

.cat_img {
    position:relative;
}


#spot .cat_img{
    width:calc(100%/5);
    float:left;
}

#spot .cat_open{
    width:calc(200%/5); 
}

#spot2 .cat_open{
    width:100%; 
}


#container .inner {
    padding:0 50px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
}


.box {
    border:1px solid #e9e9e9;
    padding:20px;
}

.cate_1 > .box {
    background:#faf7ef;
    min-height:360px;
}

.cate_2 > .box {
    background:#f6f1ea;
    min-height:530px;
}

.cate_3 > .box {
    background:#f6f1f5;
}

.cate_4 > .box {
    background:#f6f1ea;
}

.cate_5 > .box {
    background:#e8f3f1;
}

.img_box {
    float:left;
    padding-right:15px;
    padding-bottom:5px;
}

.box > div:first-child:after {
    content:'';
    dispaly:block;
    clear:both;
}

.txt_box {
    text-align:left;
    font-size:16px;
    line-height:22px; 
    color:#666666;
}



.color_bar {
    width:25px;
    height:2px;
}

.writter {
    clear:both;
}

.writter > p {
    color:#757575;
    font-size:16px;
}


.click_url {
    position:absolute;
    z-index:500;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    cursor: pointer;
}

.click_url a {
    display:block;
    width:100%;
    height:100%;
}



















.writer {
    color:#6b6b6b;
    font-size:16px;
    font-weight:600;
}


h2.subject {
    font-size:34px;
    font-weight:600;
}

div.sub_title {
    font-size:20px;
    line-height:32px; 
    font-weight: 400;
}

div.point {
    display:inline-block;
    font-size:20px;
    padding-bottom:7px;
    border-bottom:1px solid #333;
}

.sub_txt_box {
    font-size:16px;
    color:#454545;
    line-height:28px;
    text-align: justify;
}

.sub_txt_box p,
.sub_txt_box div {
    color:#292929;
    padding-bottom:1px;
}

.sub_txt_box h3 {
    font-size:20px;
}

.bolder {
    font-weight:bolder;
}

body {
    position:relative;
}

div.test {
    position:absolute;
    z-index:1000;
    top:0;
    left:50%;
    transform:translateX(-50%);
    opacity:0.2;
}


.sub_list {
    display:none;
    position:absolute;
    border:1px solid #e5e5e5;
    width:500%;
    padding:15px;
    z-index:999;
}


.sub_list.list_1 {
    left:0;
    background:#fbf6e7;
}

.sub_list.list_2 {
    left:-100%;
    background:#fbf0e3;
}

.sub_list.list_3 {
    left:-200%;
    background:#fadcf4;
}

.sub_list.list_4 {
    left:-300%;
    background:#ffeaf1;
}

.sub_list.list_5 {
    left:-400%;
    background:#e0f9f4;
}






.cat_img1:hover .sub_list.list_1,
.cat_img2:hover .sub_list.list_2,
.cat_img3:hover .sub_list.list_3,
.cat_img4:hover .sub_list.list_4,
.cat_img5:hover .sub_list.list_5 {    
    display:block;    
}



.sub_list ul>li{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #e1e1e1;}
.sub_list ul>li:last-child{border:0; margin:0; padding:0;}
.sub_list ul a{color:#bfc2c8;transition:.2s;}
.sub_list ul>li>a{color:#454545;font-size:14px;}
/*.sub_list ul a:hover{color:#fbf042;}*/


.list_1 ul>li>a:hover {
    color:#f8cb00;
}

.list_2 ul>li>a:hover {
    color:#e98003;
}






@media only screen and (max-width: 768px){
    #container .inner {
        padding:0 20px;
    }
    
    
    
}