@charset "utf-8";

@import "normalize.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789,');
@import url('https://fonts.googleapis.com/css?family=Roboto:400&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:/');
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/NotoSansCJKjp-DemiLight.woff2') format('woff2'),
	     url('../fonts/NotoSansCJKjp-DemiLight.woff') format('woff'),
	     url('../fonts/NotoSansCJKjp-DemiLight.ttf')  format('truetype'),
         url('../fonts/NotoSansCJKjp-DemiLight.eot') format('embedded-opentype');
	font-display: swap;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html{font-size: 62.5%; background-color: #e9e5de; font-family: 'Noto Sans Japanese', sans-serif;height:100%;}

a:link, a:visited{ color:#333;text-decoration: none;transition: all 0.2s ease-in;}
a:hover{text-decoration:none;}
a:focus{ outline:none; }
:root {
    --main-color:#434343;
	--sub-color:#545454;
	--color-01:#a1a1a1;
	--color-02:#727272;
	--color-03:#656565;
}

body{font-size:1.3rem; line-height:1.5;}
#wrapper{position: relative;display: flex; flex-direction: column; min-height: 100vh;}
img {
  max-width: 100%;
  vertical-align: middle;
}


/* Header
*******************************************************************************************************************/
.header_bg{ background-color:var(--main-color); padding:25px; position:relative; height: 130px;transition: 0.4s ease-in-out;}
.header_h1{ font-size:1.05rem;  color:#FFF; letter-spacing: 0.15rem; opacity: 0.6; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";-webkit-font-smoothing: subpixel-antialiased;}
.header_logo a{position:absolute; bottom:24px; background: url(../img/logo.png) no-repeat; width: 137px; height: 17px; display: block;}
.header_logo a{opacity:0.75;}
.header_logo a:hover{opacity:1; }
.nav_item {font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size:1.35rem; letter-spacing: 0.08rem; position:absolute; bottom:23px;left:50%;text-align: center;
transform: translateX(-50%);}
.nav_item ul {margin: 0; padding:0;white-space:nowrap;}
.nav_item li {display: inline-block; padding: 0 3px; margin: 0 10px;position: relative;}
.nav_item li a { color: #CCC;  padding: 10px 3px; }
.nav_item li a:hover {color: #FFF; }
.nav_item li.navi_jp a:after{opacity:0.3;position: absolute;bottom: -8px;left: 0;content: '';width: 100%;height: 1px;background: #fff;}
.navi_jp, .navi_wd, .navi_lp, .navi_sp {}
.menu_icon {
position:absolute; right:20px; bottom:12px; opacity:0.6;
padding: 5px;
display: block;
cursor: pointer;
transition: all 0.2s ease-in;
text-align:center;
}
.menu_icon:hover{opacity:1.0;}
.menu_icon span {
  display: block;
  width: 20px;
  height:2px;
  background: #FFF;
  margin-bottom: 5px;
  transition: all 0.4s ease-out;
}
.menu_icon.active {transform: rotate(-45deg);}
.menu_icon.active .bar1 {transform: rotate(0deg) translateY(8px);}
.menu_icon.active .bar2 {opacity: 0;}
.menu_icon.active .bar3 {transform: rotate(-90deg) translateX(6px);}
.hide { position: absolute; display:none;}

/* Menu
*******************************************************************************************************************/
.wdc{display:none; background-color: #f3f0e9; padding:45px 80px 50px 80px; position: relative;}
.wdc_inner{display: flex; transition: 0.2s ease-in-out;}
.wdc_link{position:absolute; top:25px; right:70px;}
.wdc_link ul{margin: 0; padding:0;white-space:nowrap;}
.wdc_link li{display: inline-block; padding: 0 3px; margin: 0 9px; font-size:1.6rem; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
.wdc_link li a{color:#666; border-bottom: 1px solid #DDD; padding-bottom: 3px; transition: all 0.2s ease-in;}
.wdc_link li a:hover{color:#111; border-bottom: 1px solid #333;}
.wdc_left{width: 360px; min-width: 360px; margin-right: 70px; color:#555;}
.wdc_left--entry{color:#555; padding-bottom:8px; margin-bottom:18px; border-bottom:solid 1px #AAA; font-size:1.6rem;}
.wdc_left--entry span{font-family: 'Roboto Condensed', sans-serif;  font-weight: 300;  font-size:3.0rem; margin:0 8px;}
.wdc_left--cap{font-size:1.1rem; text-align: justify; line-height: 1.8; letter-spacing: 0.12rem; margin-bottom: 30px;}
#searchform{ margin-bottom: 20px;}
.wdc_left--input{margin: 0 8px 0 0;padding: 0px 20px;max-width: 100%;height:33px;width: 272px;outline: none; border: 1px solid #aaa;background: #f3f0e9;color: #777;font-size:100%; border-radius:20px;transition: all 0.2s ease-in;}
.wdc_left--input:focus{background: #FFF;color: #333;}
.wdc_left--btn{height: 35px; width:35px; border:none; margin:0; padding:0; vertical-align:top; background:url(../img/s_btn.png) no-repeat var(--color-03);border-radius:18px;transition: all 0.2s ease-in;}
.wdc_left--btn:hover{opacity: 0.8; outline: 0;}
.wdc_left--sub{font-family: 'Roboto Condensed', sans-serif;  font-weight: 300;  font-size:1.1rem; color:#666; margin-bottom: 7px;}
.wdc_left--color{margin-bottom: 23px;}
.wdc_left--color ul {list-style: none; padding: 0px;height: 19px; display: flex; justify-content: space-between;}
.wdc_left--color li a{background: url(../img/color.png) no-repeat; display:block; margin-right: 9px; height: 19px; width: 19px;}
li.color_01 a{background-position:0 top ;}
li.color_02 a{background-position: -19px top ;}
li.color_03 a{background-position: -38px top ;}
li.color_04 a{background-position: -57px top ;}
li.color_05 a{background-position: -76px top ;}
li.color_06 a{background-position: -95px top ;}
li.color_07 a{background-position:-114px top ;}
li.color_08 a{background-position:-133px top ;}
li.color_09 a{background-position:-152px top ;}
li.color_10 a{background-position:-171px top ;}
li.color_11 a{background-position:-190px top ;}
li.color_12 a{background-position:-209px top ;}
li.color_13 a{background-position:-228px top ;}
.wdc_left--layout{display: flex; justify-content: space-between; }
.wdc_left--layout dl {width: 50px;}
.wdc_left--layout dl a{background: url(../img/layout.png) no-repeat; display:block; margin-right: 9px; height: 35px; width: 50px; font-family: 'Roboto Condensed', sans-serif;  font-weight: 300;font-size:1.1rem;  position: relative; opacity: 0.7;}
.wdc_left--layout dl a:hover{opacity: 1.0;}
dl.layout_01 a{background-position: 0 top ;}
dl.layout_02 a{background-position: -50px top ;}
dl.layout_03 a{background-position: -100px top ;}
dl.layout_04 a{background-position: -150px top ;}
dl.layout_05 a{background-position: -200px top ;}
dl.layout_06 a{background-position: -250px top ;}
dl a:hover{ background-color:#FFF;}
.wdc_left--layout dt{margin:0;}

.wdc_left--layout dd{ letter-spacing:0.1em;text-align: center;padding: 0px; position: absolute; bottom:-19px; width: 50px;}
.wdc_right{ padding-top: 23px; flex: 1;}
#wdc_menu{ min-width:380px;}
#wdc_menu .nav { border-bottom: solid 1px #AAA; height: 30px; margin-bottom:18px;font-family: 'Roboto Condensed', sans-serif;  font-weight: 300;font-size:1.25rem; letter-spacing: 0.1rem;}
#wdc_menu .nav ul {margin: 0; padding:0; height: 30px;}
#wdc_menu .nav li {display: inline; text-align:center; margin-right:8px;}
#wdc_menu .nav li a {color:#AAA;text-decoration:none; display:inline-block; width:180px; height: 29px;line-height:30px; border:solid 1px #AAA; border-bottom:none;}
#wdc_menu .nav li a:hover {color:#333; background-color:#fff; border:solid 1px #AAA; border-bottom:none;}
#wdc_menu li a.current, #wdc_menu li a.current:hover {color:#FFF; text-decoration:none; height: 30px;line-height:30px; border:solid 1px var(--color-03); border-bottom:none; background-color:var(--color-03); }
#Tab1 ul, #Tab2 ul{ list-style:none;display: flex; flex-wrap:wrap;white-space:nowrap;}
#Tab1 li, #Tab2 li{  margin:0 5px 0 0; width: 24.3%;}
#Tab1 li a, #Tab2 li a{ font-size: 1.18rem; font-weight: 300; letter-spacing: 0.08rem;
	display: block;
	position: relative;
	z-index: 2;
	text-decoration:none;
	color:#555;
	overflow: hidden;
	padding:10px 10px 8px 10px; 
	border-bottom:solid 1px #DDD;
}

#Tab1 li a:hover, #Tab2 li a:hover{
	color: #333;
}
#Tab1 li a:hover:after, #Tab2 li a:hover:after{
	top: 0;
	left: 0;
	background-color:#fff;
}
#Tab1 li a:before, #Tab1 li a:after, #Tab2 li a:before, #Tab2 li a:after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
		top: 0%;
	left: -100%;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .35s;
	transition: all .35s;
}



/* Index
*******************************************************************************************************************/
.contents_link{padding: 20px 60px 20px 60px;}
.index_link{width: 350px; margin: 0 0 30px 0;}
.contents_top{padding: 80px 60px 10px 60px;}
.contents_btm{padding: 70px 60px 10px 60px;}
.contents_ad{padding: 60px 60px 0px 60px; background-color: #f3f0e9; position: relative; overflow: hidden;}
.contents_ad--cap{position: absolute;left:50%; bottom:15px;transform:translateX(-50%); font-family: 'Roboto', sans-serif;  font-weight: 400; font-size: 1.0rem; color: #6b6765; letter-spacing: 0.2rem;}
.post, .post_center{max-width:1580px; margin: 0 auto; transition: 0.2s ease-in-out; }
.post_ul{list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between;content-visibility: auto; contain-intrinsic-size: 360px;}
.post_li{ height: 294px; width: 350px; margin: 0 0 60px 0; background-color:#FFF; box-shadow:0px 0px 2px 0px #cac2b5;}
.post_empty {height: 0;margin-top: 0;margin-bottom: 0;padding-top: 0;padding-bottom: 0;width: 350px;}
.post_img{position: relative; overflow: hidden; height: 229px; width: 350px; }
.post_inner{position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;background: rgba(0,0,0,.5);-webkit-transition: .3s;transition: .3s;opacity: 0;}
.post_li:hover .post_inner {opacity: 1;}
.post_img img {-webkit-transition: all 0.3s; transition: all 0.3s;}
.post_li:hover .post_img img {-webkit-transform: scale(1.05);transform: scale(1.05);filter: grayscale(50%);}
.post_inner--date{ position: absolute; top:15px; left:15px; color:#FFF; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-size: 1.4rem;}
.post_inner--detail a{width: 38px;height: 38px; background: url(../img/post.png) no-repeat 0 top; opacity: 0.6; position: absolute; bottom:10px; right:12px;  z-index:3;}
.post_inner--launch a{width:100%; height:100%; display: block; background: url(../img/launch.png) no-repeat 252px 181px; opacity: 0.6; position: absolute;  }
.post_inner--launch---sp a{width:100%; height:100%; display: block; background: url(../img/launch.png) no-repeat 300px 181px; opacity: 0.6; position: absolute;  }
.post_inner--detail a:hover, .post_inner--launch a:hover, .post_inner--launch---sp a:hover{opacity: 1.0;}
.post_inner--qr{position: absolute; bottom:20px; left:20px;}
.post_li:hover .post_inner--qr img {-webkit-transform: scale(1);transform: scale(1);}
.post_title{ padding: 13px 15px 3px 15px; font-size: 1.3rem; letter-spacing: 0.04rem;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.post_title a{color: #666;}
.post_title a:hover{color: #aaa;}
.post_url{font-family: 'Roboto', sans-serif;  font-weight: 400; margin: 0; padding: 0px 16px; font-size: 0.8rem; letter-spacing: 0.03rem;color: #999; width: 230px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.post_ad{display: flex;justify-content: center;align-items: center; position: relative; height: 294px; width: 350px; margin: 0 0 60px 0; background-color:#FFF; box-shadow:0px 0px 2px 0px #cac2b5;}
.post_ad--cap{position: absolute; left:50%; bottom:-20px;transform:translateX(-50%); font-family: 'Roboto', sans-serif;  font-weight: 400; font-size: 1.0rem; color: #625e5c; letter-spacing: 0.2rem; }
.post_cate{ background-color:var(--sub-color); padding: 15px 22px;}
.post_cate--h2{ font-size:1.25rem; color:#CCC; font-weight:nomal; letter-spacing: 0.1rem; }
.post_cate--h2 span{ margin-left:3px;}
.post_ad_bottom{ text-align: center; margin:0 20px 30px 20px; overflow: hidden;}
.post_cate--title{ text-align: center; color:#444; font-size:2.6rem; letter-spacing: 0.1rem;padding-top: 10px;  padding-bottom: 60px; margin-bottom: 50px; position: relative; white-space: nowrap;}
.post_cate--title::after{content: ''; height: 2px; width: 40px; display: block; background-color: #555; position: absolute; left: 50%; bottom:15px;transform:translateX(-50%);}
.breadcrumb{letter-spacing: 0.1rem;}
.breadcrumb ul{ list-style: none;}
.breadcrumb li{ display: inline-block; color:#CCC;  margin-right: 3px; font-size:1.2rem;}
.breadcrumb li:last-child::after{display: none;}
.breadcrumb li::after{ content: "＞"; margin-left: 8px; font-size:0.8rem; vertical-align:1px;}
.breadcrumb li a{ position: relative; color:#CCC; padding-bottom: 5px;}
.breadcrumb a:hover{color:#FFF;}


/* Single
*******************************************************************************************************************/
.single{margin: 0 auto  30px auto; width: 1000px; padding: 100px 0 50px 0; color: #333; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.single_left{ width: 600px; position: relative; margin-bottom: 30px;}
.single_left--sp ul{list-style: none;display: flex;flex-wrap: nowrap; justify-content: space-between;}
.single_left--sp span{ display: none;}
.single_left--sp li {width: 49.9%; margin-bottom: 2px;}
.single_left--sp li a{}
.single_left--img a{ background-color: #FFF;}
.single_left--img a:hover, .single_left--sp li a:hover{opacity: 0.8;}
.single_left--detail{ padding: 20px 0px 0px 0px; letter-spacing: 0.12rem; margin-bottom: 5px;}
.single_left--title{padding:5px 5px 5px 5px; font-size:2.1rem;   overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.single_left--title a:hover{color:#999; }
.single_left--url{ padding:0 5px 25px 5px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-family: 'Roboto Condensed', sans-serif;}
.single_left--des{padding:0 5px 25px 5px;  font-size:1.15rem; line-height: 1.8;}
.single_left--qr{padding:0 5px 15px 5px;}
.single_left--ad{ padding:20px 0; overflow: hidden;}
.s_count{ font-size: 1.4rem; margin-left:6px;}
.single_left--sns{ margin-bottom:20px;}
.single_left--sns ul{ list-style:none;}
.single_left--sns li{display:inline-block; margin:0 4px;}
.single_left--sns li a{background: url(../img/s_sns.png) no-repeat; background-color:#f3f0e9; display:block;width: 35px;height: 35px; border-radius: 50%;}
.single_left--sns li a:hover{ background-color:#FFF;}
li.single_left--sns_fb a{width: 45px; height: 45px; background-position: 0 top;}
li.single_left--sns_tw a{width: 45px; height: 45px; background-position: -45px top; }
li.single_left--sns_ht a{width: 45px; height: 45px; background-position:-90px top;}
li.single_left--sns_pr a{width: 45px; height: 45px; background-position:-135px top;}
.single_left--category{font-family: 'Roboto Condensed','Noto Sans JP', sans-serif;white-space: nowrap;}
.single_left--tag{ margin-bottom: 10px;}
.single_left--tag ul, .single_left--category ul{ list-style: none; display: flex; flex-wrap: wrap;}
.single_left--tag li a, .single_left--category li a { font-size: 1.15rem; background-color:#f3f0e9; padding: 8px 10px; display: inline-block; margin: 3px;border-radius:4px;}
.single_left--tag li a:hover, .single_left--category li a:hover{background-color: #FFF;}
.single_right{width: 336px;}
.single_right--ad{ background-color: #f3f0e9; height: 280px; width: 336px;display: flex;justify-content: center;align-items: center; margin-bottom: 50px; }
.single_right--title{font-family: 'Roboto Condensed','Noto Sans JP', sans-serif; text-align: center; font-size:1.6rem; letter-spacing: 0.1rem; padding-bottom: 40px; margin-bottom: 20px; position: relative;}
.single_right--title::after{content: ''; height: 2px; width: 15px; display: block; background-color: #999; position: absolute; left: 50%; bottom:15px;transform:translateX(-50%);}
.single_right--entry{}
.single_right--entry_a{ margin-bottom:20px;}
.single_right--entry_a a{ color: #666;}
.single_right--entry_a a img{transition: all 0.2s ease-in; background-color: #FFF;}
.single_right--entry_a a:hover img{  opacity: 0.7;}
.single_right--entry_a a:hover .single_right--entry_right{background-color:#FFF;}
.single_right--entry_post{display: flex;}
.single_right--entry_left{ width: 120px; height: 80px; overflow: hidden; background-color: #FFF; position:relative;}
.single_right--entry_right{ flex: 1; position: relative; background-color:#f3f0e9;transition: all 0.2s ease-in;}
.single_right--entry_title{ font-size: 1.1rem; position:absolute; left:14px; top:17px; letter-spacing: 0.05rem; text-overflow: ellipsis; width: 185px;overflow:hidden; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.single_right--entry_url{font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.05rem; font-size:10px; position:absolute; left:16px; bottom:16px; color: #999; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; width: 180px;}

.single_pagebtn{ position: relative; font-size:1.2rem; letter-spacing: 0.1rem; height: 55px;}
.single_pagebtn--next{position: absolute; left: -5px; bottom:-28px;} 
.single_pagebtn--back{position: absolute; right: -5px; bottom:-28px;}
.single_pagebtn--back a{position: relative; background:url("../img/sp_next.png") top left no-repeat ; background-color:#f3f0e9; display: block; width: 50px; height: 50px;border-radius:50%; margin: 6px;}
.single_pagebtn--back a::after{content: '次のデザイン';position: absolute;white-space: nowrap; left: 50%; bottom:-26px;transform:translateX(-50%); color:#555;}
.single_pagebtn--next a{position: relative; background:url("../img/sp_back.png") top left no-repeat ; background-color:#f3f0e9; display: block; width: 50px; height: 50px;border-radius:50%; margin: 6px;}
.single_pagebtn--next a::after{content: '前のデザイン';position: absolute;white-space: nowrap; left: 50%; bottom:-26px;transform:translateX(-50%); color:#555;}
.single_pagebtn--back a:hover, .single_pagebtn--next a:hover{ background-color: #FFF;}
.single_ad_bottom{ text-align: center; margin:0 auto 70px auto; background-color: #f3f0e9; width: 1000px; padding: 13px 0 7px 0; overflow: hidden;}

.single_group{margin: 0 auto; width: 1000px; padding: 0px 0 50px 0; color: #333; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.single_group--sub{ width: 320px;}
.single_group--title{font-family: 'Roboto Condensed', sans-serif; font-size:1.5rem; text-align: center; letter-spacing: 0.03rem; padding-bottom: 28px; margin-bottom: 8px; position: relative;}
.single_group--title::after{content: ''; height: 1px; width: 15px; display: block; background-color: #777; position: absolute; left: 50%; bottom:15px;transform:translateX(-50%);}
.single_group--entry_a{ margin-bottom: 21px;}
.single_group--entry_a a{ color: #666;}
.single_group--entry_a a img{transition: all 0.2s ease-in; background-color: #FFF;}
.single_group--entry_a a:hover img{  opacity: 0.7;}
.single_group--entry_a a:hover .single_group--entry_right{background-color:#FFF;}
.single_group--entry_post{display: flex;}
.single_group--entry_left{ width: 120px; height: 80px; overflow: hidden; background-color: #FFF; position:relative;}
.single_group--entry_right{ flex: 1; position: relative; background-color:#f3f0e9;transition: all 0.2s ease-in;}
.single_group--entry_title{ font-size: 1.1rem; position:absolute; left:14px; top:17px; letter-spacing: 0.05rem; text-overflow: ellipsis; width: 170px;overflow:hidden; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.single_group--entry_url{font-family: 'Roboto', sans-serif; letter-spacing: 0.05rem; font-size:10px; position:absolute; left:16px; bottom:16px; color: #666; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; width: 170px;}

/* Page
*******************************************************************************************************************/
.con_page{ margin: 0 auto; width: 700px; padding: 120px 0 80px 0; color: #333;}
.con_page--title{ text-align: center; font-size:2.6rem; letter-spacing: 0.1rem; padding-bottom: 60px; margin-bottom: 50px; position: relative; white-space: nowrap;}
.con_page--title::after{content: ''; height: 2px; width: 40px; display: block; background-color: #333; position: absolute; left: 50%; bottom:15px;transform:translateX(-50%);}
.con_page--search{ width:100%; padding: 60px 0 80px 0; color: #333; display: block; }
.con_page--search01{text-align: center;  font-size:1.6rem; margin-bottom: 30px;letter-spacing: 0.1rem;}
.con_page--search02{text-align: center;letter-spacing: 0.08rem;margin-bottom: 50px;}
.con_page--searchform{margin: 0 auto;  width: 360px;margin-bottom: 40px;}
.con_page--title02{  font-size:2.0rem; margin-bottom: 10px auto;letter-spacing: 0.1rem; text-align: center;}
.con_page--title02 span{position: relative;display: inline-block;padding: 0 1.8rem;}
.con_page--title02 span::before, .con_page--title02 span::after{position: absolute;top: 50%;content: '';width: 1.2em;height: 1px;background-color: #999;}
.con_page--title02 span::before {left: 100%;}
.con_page--title02 span::after { right: 100%;}
.con_page--sub{font-size:1.7rem; margin-bottom: 10px;letter-spacing: 0.1rem; position: relative;}
.con_page--sub::after{content: ''; height: 1px; width: 12px; display: block; background-color: #444; position: absolute; left: -25px; top:13px;}
.con_page--text{font-size:1.3rem; margin-bottom: 18px;letter-spacing: 0.25rem; text-align: justify; line-height: 2.0;}
.con_page--noteL{font-size:1.8rem; text-align: center;}
.con_page--note{ line-height: 1.8; letter-spacing: 0.1rem; padding: 50px; background-color:#f3f0e9; border-radius:8px; margin-bottom:100px; }
.con_page--link{ margin-bottom: 7px; }
.con_page--link a{font-size:1.3rem;background-color: #f3f0e9; letter-spacing: 0.15rem; line-height: 1.8; position: relative; 
margin-left: 10px; padding:3px 5px;}
.con_page--link a:hover{color: #666; background-color: #FFF; margin-left: 15px;}
.con_page--link a::before {position: absolute;content: '';width: 6px;height: 6px;border-top: solid 1px #444;border-right: solid 1px #444;-webkit-transform: rotate(45deg);transform: rotate(45deg);top: 6px;left: -14px;}


/* Form
*******************************************************************************************************************/
.form_page{ width: 500px; margin: 0px auto 60px auto; padding-top: 30px;}
.form_page--name{padding:35px 0 3px 0; font-size: 1.4rem;letter-spacing:0.2rem; position: relative;}
.form_page--submit{padding:30px 0 30px 0; text-align: center; margin-bottom: 20px;}
.form_page--hissu{ position: absolute; right: 0; font-size:1.1rem; letter-spacing:0.4rem; padding:1px 20px; background:#555;color:#fff;border-radius:3px;}
.form_page input[type=text],input[type=email]{padding:10px; margin-bottom: 5px;font-size:1.5rem; letter-spacing: 0.15rem;}
.form_page textarea{resize: none;width:470px; padding:15px;border-bottom:solid 1px #AAA;border-top:none; border-right:none; border-left:none; background-color:#e9e5de; margin-bottom: 2px;transition: 0.2s ease-in-out;font-size:1.5rem; letter-spacing: 0.15rem;}
span.wpcf7-list-item { display: block; }
.form_page input[type=text], .form_page input[type=email]{width:480px;border-bottom:solid 1px #AAA;border-top:none; border-right:none; border-left:none; background-color:#e9e5de; transition: 0.2s ease-in-out;}
.form_page input:focus, .form_page textarea:focus{border-bottom:solid 1px #AAA;border-top:none; border-right:none; border-left:none; background-color:#f3f0e9;color: #333;}
.form_page input, .form_page textarea{outline: none;}
.form_page input[type=submit] {transition: 0.2s ease-in-out;position: static; text-align: center;display: inline-block; border:none;width:250px;height:40px;color:#FFF;background-color:#333;border-radius:20px;}
.form_page input:hover[type=submit]{border:none;cursor:pointer;background-color:#666;}

/* reCAPTCHA */
.grecaptcha-badge { visibility: hidden; }
.recap{background: #666; color: #BBB; border-radius: 10px; margin-bottom: 30px; padding: 20px; letter-spacing: 0.05em;font-family: 'Roboto Condensed', sans-serif; font-weight: 400; }
.recap a{color: #FFF;}
/* PageNavi
*******************************************************************************************************************/
.wp-pagenavi{ margin-bottom:60px;	text-align: center; white-space: nowrap;}
.wp-pagenavi a, .wp-pagenavi span{ 
	font-family: 'Roboto Condensed', sans-serif;
	display:inline-block;
	color:#666;
	background-color:#f3f0e9;;
	text-decoration: none;
	text-align: center;
	line-height: 44px;
	width: 44px;
	height: 44px;
	margin:0 6px;
transition: 0.2s ease-in-out;
  white-space: nowrap;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.wp-pagenavi a:hover{ background-color:#fff; color:#000; }
.wp-pagenavi span.current {background-color:var(--main-color); color:#FFF;}
.pnm{ margin-bottom:30px;}


/* PageTop
*******************************************************************************************************************/
.pagetop{position: fixed;width:60px;height:60px; right:0px; display: none;}
.top_arrow{position: absolute;  top:10px; right:10px;}
.top_arrow a {background:url(../img/pagetop.png) top left no-repeat ;background-color:var(--main-color);display: block;width:38px;height:38px;-webkit-border-radius: 50%;border-radius: 50%;}
.top_arrow a:hover {text-decoration: none;background:url(../img/pagetop.png) top left no-repeat var(--color-03);}

/* Contact Form7
*******************************************************************************************************************/
.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em !important;
	padding: 15px !important; background-color: #f3f0e9 !important; text-align: center !important; margin-bottom: 10px !important; border-radius:30px !important; border: none !important;
}

.wpcf7 form.init .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	padding: 15px !important; background-color: #f3f0e9 !important; text-align: center !important; margin-bottom: 10px !important; border-radius:30px !important; border: none !important;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	padding: 15px !important; background-color: #f3f0e9 !important; text-align: center !important; margin-bottom: 10px !important; border-radius:30px !important; border: none !important;
}

.wpcf7 form.spam .wpcf7-response-output {
	padding: 15px !important; background-color: #f3f0e9 !important; text-align: center !important; margin-bottom: 10px !important; border-radius:30px !important; border: none !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	padding: 15px !important; background-color: #f3f0e9 !important; text-align: center !important; margin-bottom: 10px !important; border-radius:30px !important; border: none !important;
}
.ajax-loader{display: none !important;}

/* Footer
*******************************************************************************************************************/
footer{margin-top: auto;}
.btm{background-color:var(--main-color); }
.btm_sns{ text-align:center; padding:40px 0 8px 0; margin-bottom:20px;}
.btm_sns ul{ list-style:none;}
.btm_sns li{display:inline-block; margin:0 6px;}
.btm_sns li a{background: url(../img/f_sns.png) no-repeat; background-color:var(--color-03); display:block;width: 35px;height: 35px; border-radius: 50%;}
.btm_sns li a:hover{ opacity: 1.0;}
li.btm_fb a{width: 35px; height: 35px; background-position: 0 top; opacity: 0.4;}
li.btm_tw a{width: 35px; height: 35px; background-position: -35px top; opacity: 0.4;}
li.btm_ht a{width: 35px; height: 35px; background-position:-70px top; opacity: 0.4;}
li.btm_fe a{width: 35px; height: 35px; background-position:-105px top; opacity: 0.4;}
li.btm_rs a{width: 35px; height: 35px; background-position:-140px top; opacity: 0.4;}

.btm_link{ margin-bottom:5px;letter-spacing:0.08em; text-align: center; }
.btm_link ul{ list-style:none;}
.btm_link li{display:inline-block; }
.btm_link li a{color:#BBB; padding:0 12px 5px 12px; position: relative; font-size:1.2rem;}
.btm_link li a::after, .btm_breadcrumb li a::after{
  position: absolute;
  bottom: -3px;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color:var(--color-02);
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.btm_link li a:hover::after {width: 80%;}
.btm_link li a:hover{ color:#FFF; }
.btm_copy{ font-size:1.1rem; font-family: 'Roboto Condensed', sans-serif; font-weight: 300;  text-align: center; letter-spacing:0.15em; padding:20px 0; color:#BBB; }



@media screen and (max-width: 1600px) {
.post, .post_center{max-width: 1180px;}
.post_center li:nth-child(-n+1){ display: none;}
.contents_link li:nth-child(4){ display: none;}
.num_0{order: 3}
.num_1{order: 1}
.num_2{order: 2}
.num_3{order: 4}
.num_4{order: 5}
.num_5{order: 6}
.num_6{order: 7}
.num_7{order: 8}
.num_8{order: 9}
.num_9{order: 10}
.num_10{order: 11}
.num_11{order: 12}
.num_12{order: 13}
.num_13{order: 14}
.num_14{order: 15}
.num_15{order: 16}
.num_16{order: 17}
.num_17{order: 18}
.num_18{order: 19}
.num_19{order: 20}
.num_20{order: 21}
.num_21{order: 22}
.num_22{order: 23}
.num_23{order: 24}
.num_49{order: 25}
#Tab1 li, #Tab2 li{ width: 32.5%;}
.clips_data{max-width:1100px; margin: 0 auto; }
}
@media screen and (max-width: 1220px) {
.post, .post_center{max-width: 770px;}
.post_center li:nth-child(odd){ display: none;}
.contents_link li:nth-child(4){ display:block;}
#Tab1 li, #Tab2 li{  margin:0 5px 0 0; width: 49%;}.post::after{content:"";display: block;width:30%;}
.num_0{order: 2}
.num_1{order: 1}
.num_2{order: 3}
.num_3{order: 4}
.num_4{order: 5}
.num_5{order: 6}
.num_6{order: 7}
.num_7{order: 8}
.num_8{order: 9}
.num_9{order: 10}
.num_10{order: 11}
.num_11{order: 12}
.num_12{order: 13}
.num_13{order: 14}
.num_14{order: 15}
.num_15{order: 16}
.num_16{order: 17}
.num_17{order: 18}
.num_18{order: 19}
.num_19{order: 20}
.num_20{order: 21}
.num_21{order: 22}
.num_22{order: 23}
.num_23{order: 24}
}
@media screen and (max-width: 880px) {
.post, .post_center{max-width: 354px;}
.post_ad{ background-color: #f3f0e9; box-shadow:none;}
.ad_02{order: 2;}
.ad_04{order: 1;}
}