﻿@import url('https://fonts.googleapis.com/css?family=Comfortaa:500|Kosugi+Maru&display=swap');

body, .txt_color_nomal, .cate_list a{color: #846541}

body, .font_sans-serif, input, textarea{font-family: 'Comfortaa','Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

/* color */
.txt_color1{color: #F9C467} /* メインカラー */
.txt_color2{color: #F7F3ED} /* サブカラー */
.txt_color3{color: #C8CE4E} /* アクセントカラー1 */
.txt_color4{color: #F2ECE4} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #F9C467} /* メインカラー */
.bg_color2{background-color: #F7F3ED} /* サブカラー */
.bg_color3{background-color: #C8CE4E} /* アクセントカラー1 */
.bg_color4{background-color: #F2ECE4} /* アクセントカラー2 */


/* border-color ※!important */
.border_color1{border-color: #F9C467}
.border_color2{border-color: #F7F3ED}
.border_color3{border-color: #C8CE4E}
.border_color4{border-color: #F2ECE4}

/* hover ---------------------------------------------------------------------------------------------*/

/* color */
.hvr_txt_color1:hover{color: #F9C467} /* メインカラー */
.hvr_txt_color2:hover{color: #F7F3ED} /* サブカラー */
.hvr_txt_color3:hover{color: #C8CE4E} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #F2ECE4} /* アクセントカラー2 */

/* background-color */
.hvr_bg_color1:hover{background-color: #F9C467} /* メインカラー */
.hvr_bg_color2:hover{background-color: #F7F3ED} /* サブカラー */
.hvr_bg_color3:hover{background-color: #C8CE4E} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #F2ECE4} /* アクセントカラー2 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #F9C467}
.hvr_border_color2:hover{border-color: #F7F3ED}
.hvr_border_color3:hover{border-color: #C8CE4E}
.hvr_border_color4:hover{border-color: #F2ECE4}

/* other ---------------------------------------------------------------------------------------------*/

.linkStyle{transition: 0.3s;color: #C8CE4E}
.linkStyle:hover{opacity: 0.7}

.font_bold{font-weight: normal}

body{background-color: #FCFAF7}
.cate_list li{margin: 0;padding: 10px;width: 33.333%}
.cate_list a{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 0;border-radius: 5px}
#contents h3.bg_color1{background-image: url(./Dup/img/bg_img1.png)}
#intro::before,#intro::after{position: absolute;content: "";width: 410px;height: 100%;background-image: url(./Dup/img/bg_img3.png);background-size: contain;background-position: bottom;background-repeat: no-repeat;left: 0;bototm: 0}
#intro::after{width: 130px;background-image: url(./Dup/img/bg_img4.png);background-position: top;left: auto;right: 0;top: -50px;bototm: auto}
#intro_txt{z-index: 1}
#intro_txt h2::before{width: 100%;height: 10px;border: none;background-image: url(./Dup/img/bg_img2.png)}
#page10 a{border-radius: 5px}

.cate_title span::before{position: absolute;content: "";width: 100%;height: 10px;left: 0;bottom: 0;background-image: url(./Dup/img/bg_img2.png)}



/* design */
#header #logo{padding:30px 0;}
html{font-size:120%;}
#intro_txt h2{color:#f79c13;}
textarea::placeholder{
  color:#ccc
}


@media all and (-ms-high-contrast:none) {
body, .font_sans-serif, input, textarea{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
#header_menu .sab_title,.h_tel_bt,#page_title p,.cms_title p,.more{font-family: 'Comfortaa',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
.h_tel_bt a span{padding-top: 0}
.pager li a{padding-top: 0px;height: 70px;line-height: 77px}
}


@media screen and (max-width: 768px){
.cate_list li{width: 50%}
}


@media screen and (max-width: 667px){
#header #logo{padding: 10px 0}
html{font-size:110%;}
.cate_list li{width: 100%}
#header #logo{padding-top: 10px}
#logo .width_30per_tb{width: 20vh!important}
#intro::before{width: 300px}
#intro::after{width: 100px}
}