@charset "UTF-8";

/*------------------------------------------------------
header
-------------------------------------------------------*/
/*-------↓ヘッダー領域全体への指定↓----------*/



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



/*---------------------------------------------------------------------
front-page
----------------------------------------------------------------------*/

.new_front {
	width: 100%;
}

section {
	margin:80px 0;
}

section h2 {
	font-size:28px;
	margin-bottom:30px;
	font-weight:700;
}

/*------- top_eyecatch_set -------*/

#top_eyecatch {
	width:100%;
}

#top_eyecatch img {
	width:100%;
	height:auto;
	display:block;
}

.top_about .annotation {
	display: block;
	width: 500px;
	margin: 40px auto 0;
	padding: 5px 10px;
	font-weight: bold;
	color: #fff;
	background: #63a351;
	border: 1px solid #63a351;
	border-radius: 100px;
}

/*------- large_banner_set -------*/

.wrapper .new_front .top_about h2 {
    position: relative;
    margin: 0 auto 30px;
    padding: 1.5% 1%;
    width: 98%;
    font-size: 130%;
    font-weight: bold;
    color: #222;
    text-align: center;
    line-height: 1;
    border-left: 0;
}

.wrapper .new_front .top_about h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75px;
    height: 3px;
    background-color: #ffe042;
}

.wrapper .new_front .top_about p {
	font-size: 15px;
	text-align: center;
}

.wrapper .new_front .top_nosh_review {
	margin-bottom: 30px;
}

/*------- large_banner_set -------*/
.top_nosh_review {
	position: relative;
}

.review_banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #faf9f4;
	padding: 25px;
	border-radius: 6px;
}

.review_text {
	max-width: 500px;
}

.review_text h3 {
	margin-bottom: 15px;
	font-size: 24px;
	font-weight: bold;
}

.review_text p {
	line-height: 1.8;
	margin-bottom: 20px;
}

.review_cta {
	display: inline-block;
	padding: 12px 26px;
	background: #ffe042;
	color: #222;
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
}
/*
.review_cta:hover {
	color: #fff;
	background: #4ba09d;
}
*/
.review_image {
	width: 420px;
	height: 240px;
	background: #ddd6c0;
	border-radius: 10px;
}

.review_meta {
	margin-bottom: 12px;
}

.meta_item {
	display: inline-block;
	font-size: 12px;
	padding: 4px 10px;
	margin-right: 6px;
	background: #ddd6c0;
	color: #222;
	border-radius: 20px;
}

/*------------ first_large_banner ------------*/
.beginner_page .top_nosh_review .review_banner,
.new_front .top_nosh_review .review_banner {
	margin: 30px auto 0;
}

.beginner_page .review_banner,
.new_front .top_nosh_review .review_banner {
	background: url(../images/beginner_large_banner.webp);
	background-size: cover;
}

.review_banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #faf9f4;
	padding: 25px;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	position: relative;
	overflow: hidden;
}

.review_banner:hover {
	color: #222;
	text-decoration: none;
	opacity: 0.8;
	transition: 0.3s;
}

.review_banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/beginner_large_banner.webp) no-repeat center / cover;
	z-index: 0;
	transition: transform 0.4s ease;
}

.review_banner:hover::before {
	transform: scale(1.05);
}

.review_text {
	position: relative;
	z-index: 1;
}
/*------------ first_large_banner ------------*/


/*------- guide_card_set -------*/

.guide_grid {
	padding: 0 100px;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 70px;
}

.guide_card {
	position: relative;
	display: block;
	text-decoration: none;
	border-radius: 16px;
	padding: 40px 30px;
	color: #333;
	background: #faf9f4;
	overflow: hidden;
	transition: .25s;
}

.guide_card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/guide-bg.svg");
	background-size: cover;
	background-position: center;
	opacity: .15;
}

.guide_grid a {
	text-decoration: none;
}

.guide_inner {
	position: relative;
	z-index: 3;
	text-align: center;
}

.guide_label {
	position: absolute;
	top: 0;
	left: 0;
	background: #b4aa89;
	color: #fff;
	padding: 8px 18px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 0 0 16px 0;
	z-index: 3;
}

.guide_inner img {
	width: 70%;
	margin: 0 auto 20px;
	display: block;
}

.guide_text {
	margin-bottom: 24px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
}

.guide_btn {
	display: inline-block;
	background: #ffe042;
	padding: 12px 30px;
	border-radius: 30px;
	font-weight: 700;
	color: #222;
	border: 2px solid #ffe042;
	transition: .2s;
}

.guide_card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/*------- icon_Pictogram -------*/

.wrapper .new_front .bg_beige {
	margin: 30px auto 50px;
	padding: 50px 0;
}

.points_grid {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 20px;
	text-align: center;
}

.point_item {
	display: block;
	padding: 25px 10px 0;
	border-radius: 10px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: .2s;
}

.top_points .points_grid a {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.top_points .points_grid a:hover {
	color: #8e825c;
	text-decoration: underline #b4aa89;
}

.new_front .top_points .points_grid .point_item p {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: normal;
}

#points-heading {
	margin-bottom: 10px;
}

/* アイコン */

.point_icon{
	position: relative;
	display: inline-block;
	margin: 0 0 10px;
	color: #ddd6c0;
}

.top_points .points_grid h3 {
	font-size: 17px;
}

/* hoverアニメ */

.point_item:hover .point_icon::after {
	animation: iconShine 0.35s ease;
}

/* アイコン動き */

.point_icon svg {
	transition: transform 0.25s ease, color 0.25s ease;
}

.point_item:hover svg {
	transform: scale(1.12) translateY(-2px);
	color:#b4aa89;
}

/*------- new_post_set -------*/
.latest_posts {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
}

.post_card {
	position: relative;
	margin: 25px 0 0;
	background: #fff;
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.08);
	overflow: visible;
	transition: 0.25s ease;
}

.post_card a {
	display: block;
	transition: 0.25s ease;
}

.post_cat {
	position: absolute;
	top: -24px;
	color: #fff;
	font-size: 12px;
	font-weight:bold;
	padding: 6px 12px;
	background: #b4aa89;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.post_card:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.post_thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0 10px 0 0;
}

.post_title {
	font-size: 16px;
	padding: 15px;
	line-height: 1.6;
}

.post_thumb {
	position: relative;
}



/*---------------------------------------------------------------------
category/main
----------------------------------------------------------------------*/

.category_name {
	width: 100%;
	margin-bottom: 30px;
	padding: 6px 0;
	border: 3px solid #faf9f4;
	border-radius: 6px;
	background: #faf9f4;
	color: #a0987f;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
}

.category_tag_name {
	color: #222;
	font-size: 170%;
	font-weight: bold;
}

.category_description p {
	margin: 0;
}

.tag_description_box {
  position: relative;
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 1.5em 2em;
  box-sizing: border-box;
}

.tag_description_box:before,
.tag_description_box:after {
  position: absolute;
  content: '';
}

.tag_description_box:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
}

.tag_description_box:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
}

.main .tag_description_box p,
.main .tag_description_box ul {
	font-size: 14px;
}

.main .tag_description_box p:last-child {
	margin-bottom: 0;
}

.tag_recommend {
	width: 100%;
	height: auto;
	margin: 10px 0;
    padding: 0;
}

.tag_recommend p {
	margin-bottom: 0;
	font-weight: bold;
}

.tag_recommend ul {
	margin: 0;
}

.tag_recommend li {
	margin: 0 0 0 20px;
	font-size: 100%;
	color: #ef76a2;
	line-height: 1.8;
}

.tag_recommend li::before {
	content: "・";
}

.post_grid {
	width: 100%;
	height: auto;
	margin: 30px 0 0;
}

.post_grid .write_box {
	width: 24%;
	height: auto;
	margin: 0 16px 25px 0;
	float: left;
	position: relative;
}

.post_grid .write_box:nth-child(4n) {
	margin: 0 0 25px 0;
}

.write_box h2 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0;
	font-size: 100%;
	font-weight: bold;
	line-height: 1.6;
	color: #6383af;
	background: #fff;
}

.write_box h2 a {
	color: #444;
	text-decoration: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


.write_box h2 a:hover {
	text-decoration: underline;
	opacity: 0.6;
}

.write_box .post-update {
	margin-bottom: 0;
	font-size: 80%;
	color: #aaa;
	text-align: right;
}

.category_th {
	width: 100%;
	height: auto;
}

.category_th img {
	width: 100%;
	height: auto;
}

p.arc_text {
	line-height: 1.6;
	margin-bottom: 20px;
}

.page_click {
	margin-bottom: 12px;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}

.page_click a {
	padding: 15px 40px;
	font-size: 18px;
	color: #fff;
	background: #ffc845;
	border-radius: 7px;
}

.page_click a:hover{
	text-decoration: none;
	background: #ff9c00;
}

.tag_detail p {
	font-size: 14px;
}

.tag_detail p:nth-child(2) {
  position: relative;
  padding-left: 28px;
  margin-bottom: 5px;
  font-size: 120%;
  font-weight: bold;
  color: #222;
  line-height: 1.6;
}

.tag_detail p:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #ffe042;
  border-radius: 50%;
}

.dashed_detail {
	border-top: 2px dashed #e5dfcc;
}





/*---------------------------------------------------------------------
single/main
----------------------------------------------------------------------*/

.single_title h1 {
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
	padding: 2% 2%;
	font-size: 147%;
	font-weight: bold;
	color: #222;
	text-align: center;
	line-height: 1.4;
	background: #fff;
	border: 5px solid #ddd6c0;
	border-radius: 16px;
	position: relative;
	z-index: 0;
	box-sizing: border-box;
}

.single_title h1:before {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #fff transparent transparent transparent;
	z-index: 0;
}

.single_title h1:after {
	content: "";
	position: absolute;
	bottom: -14px; left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #ddd6c0 transparent transparent transparent;
	z-index: -1;
}

.single_thumbnail {
	width: 100%;
	height: auto;
	margin: 0 0 70px;
	text-align: center;
}

.single_thumbnail img {
  width:60%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.13);
}

.single h2 {
	width: 98%;
	margin: 70px auto 30px;
	font-size: 130%;
	font-weight: bold;
	color: #222;
	text-align: center;
	line-height: 1;
	padding: 1.5% 1%;
	position: relative;
}

.single h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 3px;
  background-color: #ffe042;
}

.bg_beige {
  position: relative;
  z-index: 0;
  margin: 40px 0 40px;
  padding: 10px 0 20px;
  background: #faf9f4;
}

.bg_beige::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #faf9f4;
  z-index: -1;
}

.inner_text li {
	line-height: 1.8;
}

.single .main h3,
.wrapper .main_m h3 {
    height: 34px;
    margin: 15px 0 30px;
    padding: 10px 0 0 10px;
    font-size: 120%;
    font-weight: bold;
    line-height: 2;
    color: #000;
    border-bottom: 6px solid #eee9d9;
}

.single .main h4,
.wrapper .main_m h4 {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 120%;
  font-weight: bold;
  color: #222;
  border-bottom: 2px dotted #e5dfcc;
  line-height: 1.6;
}

.single .main h4::before,
.wrapper .main_m h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #ffe042;
  border-radius: 50%;
}

p.relation_caption {
	width: 98%;
	margin: 100px auto 20px;
	font-size: 110%;
	font-weight: bold;
	color: #222;
	text-align: center;
	line-height: 1;
	padding: 1% 1%;
	position: relative;
}

p.relation_caption::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 3px;
    background-color: #ffe042;
}

.relation li {
	margin: 0 0 0;
	padding: 10px 0;
	border-bottom: 2px dotted #e5dfcc;
}

.relation li a:hover {
/*	text-decoration: underline;
	color: #EE3176;*/
	text-decoration: none;
}

.relation li::before {
	content: none;
}

.relation_item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.relation_thumb img {
  width: 150px;
  height: auto;
  display: block;
}

.relation_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.relation_text:hover {
	opacity: 0.5;
}

.recommend_lead {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: bold;
  color: #ef76a2;
}

.recommend_title {
  margin: 0;
  font-size: 14px;
}





/*****************************************************************
FAQ/voice
*****************************************************************/

.faq_container h2::before {
  content: "FAQ｜";
  margin-right: 0.3em;
  color: #222; /* 好きな色に調整OK */
}

.faq_box {
	width: 80%;
	height: auto;
	margin: 20px auto;
	box-sizing: border-box;
}

.faq_q {
	margin: 0;
	padding: 10px 20px;
	background: #63a351;
	font-weight: bold;
	color: #fff;
}

.faq_q::before {
	margin: 0 10px 0 0;
	padding: 5px 10px;
	content: "Q";
	color: #63a351;
	font-size: 18px;
	font-weight: bold;
	background: #f6f3e7;
	border: 1px solid #f6f3e7;
	border-radius: 100px;
}

.faq_a {
	margin: 0;
	padding: 10px 20px;
	background: #efeadb;
	font-weight: bold;
	color: #222;
}

.faq_a::before {
	margin: 0 10px 0 0;
	padding: 5px 10px;
	content: "A";
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	background: #63a351;
	border: 1px solid #63a351;
	border-radius: 100px;
}

/*------------------- 口コミ -------------------*/
.voice_list {
	width: 60%;
	margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.voice_item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f7f7f7;
  padding: 15px;
  /*border-radius: 10px;*/
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  vertical-align: middle;
  box-sizing: border-box;
}

.voice_item p {
	margin: 0;
}

.voice_list .right {
  flex-direction: row-reverse;
}

.voice_icon {
	width: 86px;
	height: auto;
	float: left;
}

.voice_icon img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #e8f3e5;
  display: block;
}

/*
----------------------------------------------------------------------------------------
  single////date author
----------------------------------------------------------------------------------------
*/

.date_author_box {
	width: 100%;
	height: auto;
	margin: 20px 0;
}

.announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 50px;
	float: left;
}

.announcement_footer {
	width: auto;
	margin-top: 50px;
}

.announcement p {
	margin: 0;
  font-size: 86%;
  color: #aaa;
  display: inline;
  line-height: 1.8;
}

.announcement_footer p {
	font-size: 80%;
	line-height: 1.6;
}

p.at {
	margin: 0;
  font-size: 86%;
  color: #aaa;
  line-height: 1.8;
  text-align: center;
}

.single_date {
	width: auto;
	height: 50px;
	margin: 0 40px 0 0;
	float: right;
	display: flex;
	align-items: center; /* ←これが核心！！ */
}

.single_date p {
	margin: 0;
	font-size: 86%;
	color: #aaa;
	display: inline;
	line-height: 1.8;
}

.mini_author {
	width: auto;
	height: auto;
	float: right;
}

.mini_author p {
	display: inline;
}

.mini_author img {
	width: 50px;
	height: 50px;
	vertical-align: middle;
}

.author_right {
	text-align: right;
}

.author_right a {
	font-size: 86%;
}

.author_header .saboxplugin-wrap {
	margin: 0 0 20px 0;
}





/*
----------------------------------------------------------------------------------------
  search////
----------------------------------------------------------------------------------------
*/
.error404 .main {
	margin: 0 auto;
}

.search_count {
	display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
	width: auto;
	height: auto;
	margin: 0 auto 0;
	padding: 0 20px 5px;
	text-align: center;
	color: #222;
}

.search_count .category_tag_name {
	font-size: 22px;
}

.tag_description_box_s {
	text-align: center;
}

.tag_description_box_s:before,
.tag_description_box_s:after {
    content: none;
}

.search_recommend {
	width: 100%;
	height: auto;
	margin: 50px auto 80px;
	padding: 30px 0 50px;
}

h2.recommend_heading {
	display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
	width: auto;
	height: auto;
	margin: 0 auto;
	padding: 0 20px 15px;
	text-align: center;
	color: #222;
}

h2.recommend_heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 3px;
  background-color: #ffe042;
}

.category_tag_name_s {
	font-size: 22px;
	font-weight: bold;
}




/*--------------- 404 design ---------------*/

.error404 #main_box {
	max-width: 1200px;
	text-align: center;
}

.error_main {
	margin-bottom: 40px;
}

.error404 .bg_beige {
	padding-bottom: 50px;
}

.error404 .main {
	padding-bottom: 0;
}

.error_character {
	width: 1200px;
	height: 230px;
	margin: 30px auto 0;
	background: url(../images/404_sabusukun.webp) no-repeat;
	background-position: 50% 100%;
	background-size: 120px;
}

.error_character .visual_404bigtext {
	margin: 0;
	font-size: 100px;
	font-weight: bold;
	font-family: "Arial Black", "Arial";
	color: #ddd6c0;
	line-height: 1;
}

.error_title {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #555;
}

.error404 .error_title {
	margin: 0 auto 30px;
}

.error_text {
	font-size: 14px;
	color: #777;
	margin-bottom: 25px;
	line-height: 1.8;
}

.btn_home {
	display: inline-block;
	padding: 12px 28px;
	background: #ddd6c0;
	text-decoration: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	color: #222;
	transition: 0.3s;
}

.btn_home:hover {
	color: #222;
	text-decoration: none;
	background: #ffe042;
	/*opacity: 0.6;*/
}

.error_main .form_box {
	margin: 30px auto 0;
	float: none;
}

.search_hint_box {
	width: 800px;
	height: auto;
	margin: 40px auto;
	padding: 20px;
}

.hint_title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}

.hint_title svg{
	line-height: 1.8;
	vertical-align: middle;
}

.hint_list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.hint_list li a {
	display: inline-block;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 13px;
	text-decoration: none;
	color: #333;
	transition: 0.3s;
}

.hint_list li a:hover {
	background: #ffe042;
	border: 1px solid #ffe042;
	color: #222;
}

.error404 .recommend_title {
	margin: 30px auto 15px;
	font-size: 16px;
	font-weight: bold;
}

.error404 .recommend_title svg{
	line-height: 1.8;
	vertical-align: middle;
}

.error404 .recommend_list {
	list-style: none;
	padding: 0;
	text-align: left;
}

.error404 .recommend_list li {
	margin-bottom: 10px;
}

.error404 .recommend_list a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
	display: inline-block;
}

.search .form_box {
	margin: 20px auto;
	float: none;
}

.error404 .recommend_list a:hover {
	color: #534d3c;
}

.error404 .recommend_posts .relation p.recommend_title {
	font-weight: normal;
}

.no_result {
	text-align: center;
}

.tag_title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}

.tag_links {
	width: 800px;
	height: auto;
	margin: 20px auto 100px;
}

.tag_links ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.tag_links svg {
	line-height: 1.8;
	vertical-align: middle;
}

.tag_links li a {
	display: inline-block;
	padding: 7px 12px;
	background: #faf9f4;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	color: #222;
	transition: 0.3s;
}

.tag_links li a:hover {
	background: #ffe042;
	color: #222;
}

.error404 .bg_beige {
	margin: 40px 0 0;
}

/* ===== スマホ対応 ===== */
@media (max-width: 600px) {

	.error_title {
		font-size: 22px;
	}

	.error_text {
		font-size: 14px;
	}

	.error_search input[type="search"] {
		width: 100%;
		margin-bottom: 10px;
	}

	.error_search input[type="submit"] {
		width: 100%;
		margin-left: 0;
	}
}




/*--------------- 記事一覧ページ design ---------------*/
/* フィルター全体 */
.filter_box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter_box .form_box {
	margin: 2px 0 0;
	float: none;
}

/* プルダウン */
.filter_box select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  min-width: 160px;
  cursor: pointer;
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
  .filter_box {
    flex-direction: column;
  }

  .filter_box select {
    width: 100%;
  }
}


/*--------------- privacy_policy design ---------------*/
.privacy_wrapper {
  max-width: 1200px;
  margin: 20px auto 0;
}

.error_title {
  width: 98%;
  margin: 30px auto 30px;
  font-size: 130%;
  font-weight: bold;
  color: #222;
  text-align: center;
  line-height: 1;
  padding: 1.5% 1%;
  position: relative;
}

.error_title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 3px;
    background-color: #ffe042;
}

.privacy_main {
  text-align: center;
  margin-bottom: 30px;
}

.privacy_wrapper .bg_beige {
	padding-top: 40px;
}

.privacy_content {
  padding: 25px;
  border-radius: 8px;
  line-height: 1.9;
}

.privacy_content h2 {
  margin-top: 30px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-size: 18px;
  font-weight: bold;
  border-left: 4px solid #ddd6c0;
}

.privacy_content p {
  font-size: 14px;
  margin-bottom: 15px;
}

.error_actions {
  text-align: center;
  margin-top: 30px;
}

/* スマホ */
@media screen and (max-width: 600px) {
  .privacy_content {
    padding: 18px;
  }
}




/*--------------- contect design ---------------*/
/* contact all */
.contact_wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 0 0;
  box-sizing: border-box;
}

.contact_content {
  border-radius: 8px;
  line-height: 1.9;
}

.contact_wrapper .bg_beige {
	padding: 30px 0;
}

/* form */
.contact_form_area {
  margin-top: 20px;
}

/* input */
.contact_form_area input,
.contact_form_area textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  border: 1px solid #ddd6c0;
  border-radius: 6px;
  box-sizing: border-box;
}

/* button */
.contact_form_area input[type="submit"] {
  background: #ddd6c0;
  border: none;
  cursor: pointer;
}

/* in contact_text */
.contact_note {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
}

/* スマホ */
@media screen and (max-width: 600px) {
  .contact_content {
    padding: 18px;
  }
}



/*--------------- profile design ---------------*/
/*.profile_page .inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 20px;
}

.profile_flex {
  display: flex;
  gap: 40px;
  align-items: center;
}

.profile_img img {
  width: 160px;
  border-radius: 50%;
}

.profile_name {
  font-size: 28px;
  font-weight: bold;
}

.profile_tag {
  color: #777;
  margin-bottom: 10px;
}

.profile_lead {
  font-size: 16px;
  line-height: 1.8;
}

.section_title {
  font-size: 22px;
  margin-bottom: 20px;
}

.profile_list li {
  margin-bottom: 8px;
}

.profile_cards {
  display: flex;
  gap: 20px;
}

.profile_card {
  display: block;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
}*/
.profile_wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 👤 プロフィールカード */
.profile_card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.profile_img img {
	display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.profile_intro p {
	margin-bottom: 0;
}

.profile_intro h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 🐶 さぶすくん */
.sabusukun_box {
  display: flex;
  gap: 20px;
  align-items: center;
}

.profile_wrapper {
  padding: 30px;
  border-radius: 10px;
  line-height: 1.9;
}

.profile_wrapper .bg_beige {
	padding: 30px 0;
}

.profile_card h2 {
  margin-bottom: 10px;
  font-size: 20px;
}

.profile_pack h2 {
	font-size: 20px;
	font-weight: bold;
	margin: 80px 0 10px;
}

@media screen and (max-width: 600px) {
  .profile_card {
    flex-direction: column;
    text-align: center;
  }

  .sabusukun_box {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================
beginner page
========================= */

.beginner_page {
padding: 40px 0;
}

.new_front .top_about .top_opening_box,
.beginner_points>p,
.top_nosh_review>p,
.beginner_anxiety>p,
h2+.beginner_final_text {
  position: relative;
  width: 900px;
  height: auto;
  margin: 0 auto;
  padding: 1.5em 2em;
  box-sizing: border-box;
}

.new_front .top_about .top_opening_box:before,
.new_front .top_about .top_opening_box:after,
.beginner_points>p:before,
.beginner_points>p:after,
.top_nosh_review>p:before,
.top_nosh_review>p:after,
.beginner_anxiety>p:before,
.beginner_anxiety>p:after,
h2+.beginner_final_text:before,
h2+.beginner_final_text:after {
  position: absolute;
  content: '';
}

.new_front .top_about .top_opening_box:after,
.beginner_points>p:after,
.top_nosh_review>p:after,
.beginner_anxiety>p:after,
h2+.beginner_final_text:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 3px solid #ddd6c0;
  border-left: 3px solid #ddd6c0;
}

.new_front .top_about .top_opening_box:before,
.beginner_points>p:before,
.top_nosh_review>p:before,
.beginner_anxiety>p:before,
h2+.beginner_final_text:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 3px solid #ddd6c0;
  border-bottom: 3px solid #ddd6c0;
}

.beginner_page .beginner_points .beginner_points_grid p {
	font-size: 15px;
}

.beginner_intro {
	text-align: center;
	margin-bottom: 30px;
}

.beginner_intro h1 {
	margin-bottom: 10px;
	font-size: 28px;
}

.beginner_intro p,
.beginner_page .beginner_final .bottom {
	margin: 0;
	font-size: 15px;
	color: #666;
	line-height: 1.8;
}

.beginner_steps {
	margin-bottom: 40px;
}

.beginner_steps_description {
	display: flex;
  justify-content: space-between;
	width: 100%;
  gap: 5px;
}

.beginner_steps .beginner_steps_description p {
  position: relative;
  flex: 1;
  padding: 25px 10px;
  font-size: 14px;
  color: #111;
}

.steps_list {
	display: flex;
	gap: 5px;
	padding: 0;
	list-style: none;
}

.step_item {
	flex: 1;
	background: #fff;
	text-align: center;
	padding: 15px 10px;
}

.step_num {
	display: block;
	font-size: 11px;
	color: #999;
	margin-bottom: 5px;
}

.step_item p {
	font-size: 13px;
}

.top_nosh_review {
	margin-top: 40px;
}

.wrapper .beginner_page .beginner_anxiety {
	width: 900px;
  margin: 40px auto 0;
}

.beginner_page .beginner_anxiety h2 {
    position: relative;
    margin: 0 auto 30px;
    padding: 1.5% 1%;
    width: 98%;
    font-size: 130%;
    font-weight: bold;
    color: #222;
    text-align: center;
    border-left: 0;
    line-height: 1;
    border-left: 0;
}

.beginner_page .beginner_anxiety h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75px;
    height: 3px;
}

.beginner_page h2 span {
	font-size: 16px;
	font-weight: bold;
	line-height: 4;
}

.circle_3box {
  display: flex;
  justify-content: center;
  gap: 0 75px;
  margin: 30px auto;
  padding: 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.box_in_circle {
  display: flex;
  justify-content: center;
  align-items: center;
	width: 250px;
  height: 250px;
  margin-bottom: 20px;
  padding: 20px;
  border: 3px solid #4ba09d;
  border-radius: 50%;
  box-sizing: border-box;
}

.beginner_page .box_in_circle p {
	margin: 0;
	font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  color: #4ba09d;
}

.beginner_page .box_in_circle p span {
	font-size: 22px;
  font-weight: bold;
  line-height: 3;
  text-align: center;
  color: #4ba09d;
  border-bottom: 1px solid #4ba09d;
}

.under_circle_box {
  display: flex;
  justify-content: center;
  gap: 75px;
	width: 250px;
  height: auto;
  text-align: center;
}

.beginner_page .under_circle_box p {
	font-size: 14px;
	line-height: 2.4;
}

.under_circle_box a {
	width: 100%;
	height: auto;
	padding: 10px 20px;
	font-weight: bold;
	color: #fff;
	background: #4ba09d;
	border: 1px solid #4ba09d;
	border-radius: 5px;
}

.under_circle_box a:hover {
	text-decoration: none;
	background: #4ABDB9;
	border: 1px solid #4ABDB9;
}


.wrapper .beginner_page .bg_beige {
	margin-bottom: 100px;
	padding: 1px 0 30px;
}

.beginner_points_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
	width: 900px;
  margin: 30px auto;
}

.beginner_page .beginner_anxiety {
	padding-bottom: 20px;
}


.wrapper .beginner_page h2 {
    position: relative;
    margin: 50px auto 30px;
    padding: 1.5% 1%;
    width: 98%;
    font-size: 28px;
    font-weight: normal;
    color: #4ba09d;
    text-align: center;
    line-height: 1;
    border-left: 0;
}

.wrapper .beginner_page h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 75px;
    height: 3px;
    background-color: #4ba09d;
}

.beginner_icon_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.beginner_point_item {
  background: #fff;
  border-radius: 10px;
  padding: 10px 0 20px;
  text-align: center;
}

.beginner_point_item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #4ba09d;
}

.beginner_point_item p {
	margin: 0;
  color: #444;
}

.beginner_page .point_icon {
  display: flex;
  align-items: center;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
}

.arrow_steps {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 20px 0 0;
}

.arrow_steps .step_item {
  position: relative;
  flex: 1;
  padding: 25px 10px;
  background: #4ba09d;
  text-align: center;
  margin-right: 0;
}

.new_front .beginner_steps {
	width: 900px;
}

.arrow_steps .step_num {
	display: inline-block;
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
	border-bottom: 1px solid #fff;
}

.arrow_steps p {
	margin: 0 auto;
  font-size: 14px;
  font-weight: bold;
	color: #fff;
}

.steps_list {
    display: flex;
    justify-content: space-between;
}

.step_list li {
  width: calc((100% - 10px) / 3);
  background-color: #ffe700;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-size: 23px;
  font-weight: bold;
  text-align: center;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps_list li:nth-child(n+2) {
  position: relative;
}

.steps_list li:nth-child(n+2):before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-style: solid;
  border-width: 12px 0 12px 15px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
  width: 15px;
  height: 0;
}

.beginner_page section.top_guide {
	width: 900px;
	hegiht: auto;
	background: #f1f1f1;
}

.wrapper .beginner_page .top_nosh_review {
	width: 1200px;
	margin-bottom: 100px;
}

.beginner_page .review_banner .review_text h3,
.new_front .top_nosh_review .review_banner .review_text h3 {
	font-family: "sans-serif", "メイリオ", "ヒラギノ角ゴシック", "Arial";
	font-size: 40px;
	line-height: 1.2;
}

.beginner_page .review_banner .review_text p,
.new_front .top_nosh_review .review_banner .review_text p {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	color: #333;
}

.beginner_page .review_banner .review_text p.meta_item,
.new_front .top_nosh_review .review_banner .review_text p.meta_item {
	margin: 0 5px 0 0;
	font-size: 12px;
}

.beginner_page .review_banner,
.new_front .top_nosh_review .review_banner {
	position: relative;
}

.review_character {
	position: absolute;
	bottom: -5px;
	right: -83px;
	width: 200px;
	height: auto;
	z-index: 3;
	pointer-events: none;
}

.beginner_final {
  margin-top: 60px;
  padding: 30px 20px;
  background: #fff;
  border-radius: 10px;
}

h2+.beginner_final_text {
	margin-bottom: 30px;
	text-align: left;
}

.beginner_choice_wrap {
  display: flex;
  gap: 100px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.beginner_choice_box {
  width: 400px;
  padding: 15px;
  border-radius: 8px;
  background: #faf9f4;
  text-align: center;
  box-sizing: border-box;
}

.beginner_choice_box svg {
	margin: 0 auto;
}

.beginner_choice_wrap .beginner_choice_box .choice_title {
	display: inline-block;
  margin: 0 auto 15px;
  font-size: 20px;
  font-weight: bold;
  color: #4ba09d;
  border-bottom: 1px solid #4ba09d;
}

.beginner_choice_wrap .beginner_choice_box ul {
	margin: 1em auto;
	text-align: left;
}

.wrapper .beginner_page .beginner_final .bottom {
	text-align: center;
}

.beginner_final_cta {
  margin-top: 20px;
  text-align: center;
}

.final_btn {
  display: inline-block;
  background: #4ba09d;
  margin-top: 50px;
  padding: 15px 25px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
}

.final_btn:hover {
	color: #fff;
	text-decoration: none;
	background: #4ABDB9;
}

.pc-flex {
  display: flex;
}

/*---------- hamburger ----------*/
.hamburger {
  width: 30px;
  height: 24px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 2px;
}



























/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/*
----------------------------------------------------------------------------------------
  メディアクエリ
----------------------------------------------------------------------------------------
*/
/****************************************************************/
/****************************************************************/
/****************************************************************/
/****************************************************************/

/*-- タブレット対応 --*/
@media screen and (max-width: 1024px) {
  .wrapper {
    width: 96%;
  }
}

/*-- スマホのとき --*/

@media screen and (max-width: 768px) {
  .wrapper,.main,.side,.main_m {
    width: auto;
    height: auto;
  }

  .pc-flex {
    flex-direction: column;
  }

  .sp_none {
  	display: none;
  }

	body {
		background: #fff;
	}

	h1, h2, h3, h4, h5, h6, span , dl, dt, dd, ul, li, a,
	tr, th, td, p {
		font-family:Roboto, "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

	p {
		margin-bottom: 2em;
		font-size: 15px;
		line-height: 1.6;
	}

	.inner_box {
		width: 100%;
	}

	.inner_box>p {
		margin: 0 3% 2.5em;
		font-size: 87%;
		line-height: 1.8;
	}

	br.br_sp {
		display: inline;
	}

	.title_text {
		margin: 1% 0 0;
		font-size: 73%;
		color: #9f9f9f;
		text-align: center;
	}

	.inner_text {
		width: 100%;
		height: auto;
		padding: 0 2%;
		box-sizing: border-box;
	}

	blockquote, site {
		position: relative;
		margin: 0 0.5em 1.5em;
		padding: 1em;
		border-left: 5px solid #ddd;
		background-color: #f5f5f5;
		z-index: 1;
	}









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

	.header {
		display: none;
	}

	.header_inner {
		width: 100%;
		height: auto;
	}

	.header_titleset a img {
		width: 165px;
	}

	.site_description {
		font-size: 7px;
	}

	h1.top_h1 {
		margin: 1% 0 2%;
		font-size: 73%;
		line-height: 1.5;
		text-align: center;
	}

	dl {
		padding: 10px 3% 0;
		border: 2px dashed #ff5e80;
	}

	dt {
		border-bottom: 5px solid #ff5e80;
	}

	dd {
		margin-bottom: 13px;
		padding: 0;
		font-size: 87%;
		line-height: 1.4;
		position: static;
	}

	dd:before {
		display: none;
		content: none;
		margin: 0;
		vertical-align: text-bottom;
		position: static;
		left: 0;
		top: 0;
	}

	.breadcrumb {
		padding-left: 3%;
	}


/*---------- hamburger ----------*/
	#nav_box {
		display: block;
	}

	.hamburger {
    display: flex;
    position: relative;
	  z-index: 9999;
  }


  #nav_box {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #fff;
    transition: 0.3s;
    z-index: 9999;
  }

  #nav_box.active {
    right: 0;
  }



/*---------- hamburger ----------*/
/*---------- footer ----------*/
	#footer {
		margin: 30px auto 0;
		padding: 0px 0 10px;
	}

	.footer_inner {
		width: 100%;
		padding: 3%;
		box-sizing: border-box;
		display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
	}

	.footer_grid {
		display: block;
	}

  .footer_col a {
    display: block;
    padding: 10px 0;
  }

  .footer_bottom {
    text-align: center;
    margin-top: 0;
    font-size: 13px;
}


/*---------- footer ----------*/
/*--------------- front/wrapper/main ---------------*/

	.main {
		width: 100%;
		margin: 0;
		padding-bottom: 5%;
		box-shadow: none;
		float: none;
	}

	#top_return, #top_return a img {
		display: none;
	}

	.new_front section {
		width: 100%;
		padding: 3%;
		box-sizing: border-box;
	}

	.top_about .annotation {
		width: 90%;
		margin: 1% auto 0;
		padding: 3px 10px;
		box-sizing: border-box;
	}

	.guide_grid {
		padding: 0;
	}

	.guide_card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 16px;
    padding: 40px 30px;
    color: #333;
    background: #faf9f4;
    overflow: hidden;
    transition: .25s;
  }

  .wrapper .new_front .bg_beige {
    margin: 30px auto;
    padding: 25px 0;
  }

  .wrapper .new_front .top_about h2,
  .new_front section h2 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 0;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #222;
    text-align: center;
    border-left: none;
    box-sizing: border-box;
	}

	.wrapper .new_front .top_about h2::before,
	.new_front section h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 3px;
    background-color: #ffe042;
	}
/*
	.new_front section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    border-left: 5px solid #ffe042;
    padding-left: 12px;
	}
*/














	.trouble_btn li {
		width: 50%;
		height: auto;
		margin: 0 0 0 0;
		float: left;
	}

	.trouble_btn li:nth-child(3n) {
		margin-right: 0;
	}

	.trouble_btn li img {
		vertical-align: bottom;
	}

	.jump_btn {
		margin: 0 0 2%;
	}

	.btn_left {
 		margin-right: 0;
	}

	.btn_left, .btn_right {
		width: 94%;
		height: auto;
		margin: 0 auto;
		float: none;
	}

	.btn_left a, .btn_right a {
		display: inline-block;
		width: 100%;
		height: auto;
		margin: 3% auto;
		padding: 10px 0;
		font-size: 150%;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		line-height: 1.4;
		outline: none;
	}

	.breadcrumb {
		font-size: 80%;
		margin: 2% 0 2%;
		line-height: 1.5;
	}

	.inner_text {
		padding: 3% 3%;
	}

	.new_special {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.new_contents {
		width: 100%;
		height: auto;
		margin: 0 auto;
		float: none;
	}








/*************** ranking ***************/

	.ranking {
		width: 100%;
	}

	.ranking_header {
		width: 100%;
		height: auto;
		margin-bottom: 5%;
	}

	.ranking_header img {
		width: 100%;
		height: auto;
	}

	.ranking_box {
		width: 100%;
	}

	.sp_number {
		display: block;
		width: 90%;
		height: auto;
		margin: 0 auto;
	}

	.sp_number img {
		width: 100%;
		height: auto;
	}

	.item_number_box1,
	.item_number_box2,
	.item_number_box3 {
		width: 100%;
		height: auto;
		padding-top: 7%;
		margin-bottom: 5%;
		background: none;
	}

	p.item_catch {
		padding: 2% 3%;
		font-size: 16px;
		box-sizing: border-box;
		background: #FDF5E5;
		border: 3px solid #F8CC6E;
		border-radius: 10px;
		position: relative;
	}

	p.item_catch:after {
		content: '';
		position: absolute;
		border-top: 10px solid #FDF5E5;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		bottom: -8px;
		left: 5px;
	}

	p.item_catch:before {
		content: '';
		position: absolute;
		border-top: 10px solid #F8CC6E;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		bottom: -12px;
		left: 5px;
	}

	h3.item_name {
		font-size: 20px;
		padding: 7% 3% 0;
	}





/*--------------- ranking end以降 --------------*/


	.front h4 {
		width: 94%;
		height: auto;
		margin: 0;
		padding: 3% 3% 2%;
		font-size: 20px;
		line-height: 1.3;
		background: url(../images/top_h2_sp.png) no-repeat;
		background-size: cover;
		border-bottom: 3px solid #7db0e4;
	}

	.banner_box {
		width: 100%;
		height: auto;
		margin: 0 0;
	}

	.banner_box img {
		width: 50%;
		height: auto;
	}

	.photo_margin {
		margin-right: 4%;
	}

	.banner_box .banner_no1,
	.banner_box .banner_no2,
	.banner_box .banner_no3 {
		width: 100%;
		height: auto;
		margin: 3% 0;
	}

	.banner_box .auto_img {
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
	}

	.front .paper {
		width: 92%;
		height: auto;
		margin: 10% 0 7%;
		padding: 2% 3%;
		font-size: 16px;
		box-sizing: border-box;
		background: #FDF5E5;
		border: 3px solid #F8CC6E;
		border-radius: 10px;
		position: relative;
	}

	.front .paper:after {
		content: '';
		position: absolute;
		border-top: 10px solid #FDF5E5;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		bottom: -8px;
		left: 5px;
	}

	.front .paper:before {
		content: '';
		position: absolute;
		border-top: 10px solid #F8CC6E;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		bottom: -12px;
		left: 5px;
	}
/*
	.dry {
		width: 93%;
		height: auto;
		margin: 0 0 5%;
		padding: 5% 3% 4%;
		background: url(../images/category_h3_sp.png);
		border-bottom: 3px solid #7db0e4;
	}
*/
	.front .last_contents {
		width: 100%;
		height: auto;
		margin: 7% 0 3%;
		padding: 0;
		background: url(../images/top_h2_sp.png) no-repeat;
		border-bottom: 3px solid #7db0e4;
	}

	.front .last_contents p {
		font-size: 24px;
		padding: 3% 5% 2%;
	}

	.front .last_contents h3 {
		font-size: 15px;
		padding: 0 5% 3%;
	}







/*---------------------------------------------------------------------
運営者情報ページ
----------------------------------------------------------------------*/

	.main_m {
		width: 100%;
		margin: 0;
		padding-bottom: 5%;
		float: none;
		background: #fff;
		box-shadow: none;
	}

	.management_title {
	    width: 100%;
	    height: auto;
	    margin: 0 0 20px 0;
	    padding: 2% 3%;
	    font-size: 147%;
	    font-weight: bold;
	    color: #6383af;
	    text-align: center;
	    background: #fff;
	    border: 3px solid #BFDFFF;
	    position: relative;
	    z-index: 0;
	    box-sizing: border-box;
	}

	.management {
		background: none;
	}

	.management h4 {
		width: 94%;
		height: auto;
		margin: 7% 0 5%;
		padding: 0 3% 1%;
		font-size: 16px;
		line-height: 1.3;
		background: none;
		border-bottom: 4px dotted #C3E9FC;
	}

	.management table {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.management th {
		width: 100px;
		line-height: 2;
		text-align: left;
	}

	.all_author {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.mg_author {
		width: 100%;
		height: auto;
		margin: 0 auto 20px;
		padding: 2%;
		border: 1px solid #eee;
		text-align: center;
		box-sizing: border-box;
	}

	.mg_author img {
		width: 150px;
		height: 150px;
		margin: 0 auto;
		float: none;
	}

	.mg_author_text {
		width: 100%;
		height: auto;
	}

	.writer_btn {
		width: 250px;
		height: auto;
		margin: 3% auto;
		text-align: center;
		float: none;
	}

	.mg_author .name {
		font-size: 100%;
		font-weight: bold;
		text-align: center;
		margin-bottom: 2%;
		line-height: 2;
	}

	.mg_author .name span {
		font-size: 80%;
		font-weight: normal;
	}

	.management .mg_author #twitter-widget-0 {
		vertical-align: text-bottom;
	}

	.writer_btn a {
		display: inline-block;
		width: 100%;
		height: auto;
		margin: 10px 0 0;
		padding: 4% 2%;
		text-decoration: none;
		box-sizing: border-box;
	}

	.wrapper .all_author .mg_author .mg_author_inner {
		text-align: left;
	}





























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

	.sp_top_btn {
		display: none;
	}

	#footer {
		background: #222;
	}

	.f1 .foot-box, .f1 .foot-box h3,
	.f1 .foot-box li {
		display: none;
	}
	.f2 .foot-box, .f2 .foot-box h3,
	.f2 .foot-box li {
		display: none;
	}
	
	.f3 .foot-box, .f3.foot-box h3,
	.f3 .foot-box li {
		display: none;
	}

	.f4 .foot-box, .f4 .foot-box h3,
	.f4 .foot-box li {
		display: none;
	}

	.f2 .foot-box {
		width: 94%;
		height: auto;
		margin: 0 3%;
	}

	.f2 .foot-box li {
		margin: 0 3% 1em;
	}

	.footer_inner {
		width: 100%;
	}

	.copyright {
		width: 100%;
		height: auto;
		padding: 1% 0;
	}

	.copyright p {
		font-size: 84%;
	}

	.footer_logo {
		display: none;
	}

	.foot-box-m {
		width: 100%;
		height: auto;
		margin: 0;
		float: none;
	}

	.foot-box-m h3 {
		padding: 3% 0;
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		border-bottom: 2px solid #f78fb5;
		margin-bottom: 1em;
	}

	.foot-box-m li {
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 5%;
		text-align: center;
	}

	.foot-box-m a {
		color: #fff;
		text-decoration: none;
	}

	.foot-box-m a:hover {
		color: #f78fb5;
		text-decoration: underline;
	}

	.foot-box-m img {
		display: none;
	}









/*---------------------------------------*/
/*--------------- category/main ---------------*/
/*---------------------------------------*/



	h1.category_name {
		width: 100%;
		height: auto;
		margin: 0 0 5%;
		padding: 1% 3%;
		font-size: 120%;
		background: #95C3F3;
		box-sizing: border-box;
	}

	.category_name a {
		font-size: 127%;
		color: #fff;
	}

	.post_grid .write_box {
		width: 100%;
		margin-bottom: 2%;
	}

	.post_grid .write_box:nth-child(4n) {
		margin: 0 0 2% 0;
	}

	.wrapper .main .write_box h2 {
		line-height: 1.3;
	}

	.wrapper .main .write_box h2 a {
    -webkit-line-clamp: 3;
	}

	.category_th {
		height: auto;
		margin: 0 auto 5%;
		float: none;
	}

	.category_th img {
		display: block;
		width: 90%;
		height: auto;
		margin: 0 auto;
	}

	p.arc_text {
		font-size: 86%;
		margin-bottom: 2%;
	}

	.page_click {
		width: 100%;
		text-align: center;
	}

	.page_click a {
		padding: 4% 15%;
		font-size: 134%;
		color: #fff;
		background: #ffc845;
		border-radius: 7px;
	}

	.darkening .page_click a,
	.smell .page_click a,
	.sex .page_click a {
		padding: 4% 15%;
	}






/*---------------------------------------------------------------------
single/main
----------------------------------------------------------------------*/

	.single_title {
		width: 100%;
		height: auto;
		margin: 0 auto 3%;
		padding: 0;
	}

	.single_title h2 {
		padding: 3%;
		font-size: 18px;
		line-height: 1.3;
	}

	.catch {
		width: 70%;
		height: auto;
		margin: 4% auto;
	}

	.catch img {
		width: 100%;
		height: auto;
	}

	.single .main h3 {
	    height: auto;
	    margin: 15px 0 15px;
	    padding: 0 0 0 10px;
	    font-size: 120%;
	    font-weight: bold;
	    line-height: 1.4;
	    color: #222;
	    border-bottom: 5px solid #eee9d9;
	}

	.hako_white {
		width: 85%;
		padding: 3%;
	}

	.hako_beige {
		width: 85%;
		padding: 3%;
	}

	.inner_text ul {
		margin: 0 0 1.7em;
	}

	.inner_text li {
		margin: 0 0 0 2%;
	}

	.single h2,
	.wrapper .main_m h2 {
		margin: 5% auto;
		line-height: 1.6;
	}

	.single .smell h3,
	.single .darkening h3 {
	    height: auto;
	    margin: 15px 0 15px;
	    padding: 0 0 0 10px;
	    font-size: 120%;
	    font-weight: bold;
	    line-height: 1.3;
	    color: #000;
	    background: #fff;
	    border-bottom: 9px solid #F78FB5;
	}

	.single .main h4,
	.wrapper .main_m h4 {
		width: 93%;
		height: auto;
		margin: 7% 0 3%;
		padding: 0 2% 0 5%;
		font-size: 100%;
		line-height: 1.6;
		border-bottom: 2px dotted #e5dfcc;
	}

	.single .sex h4,
	.single .smell h4,
	.single .darkening h4,
	.single .lc h4 {
		width: 94%;
		height: auto;
		margin: 7% 0 5%;
		padding: 0 3% 1%;
		font-size: 16px;
		line-height: 1.3;
		background: none;
		border-bottom: 4px solid #C5A771;
	}

	.single .main h4.mond,
	.wrapper .main_m h4.mond {
		width: 94%;
		height: auto;
		margin: 7% 0 5%;
		padding: 0 3% 1%;
		font-size: 16px;
		line-height: 1.3;
		background: none;
		border-bottom: 3px dotted #ffcbdf;
	}

	.bg_beige {
	    margin: 5% 0 2%;
	    padding: 2% 0 1%;
	}

	.dashed {
		margin-bottom: 8%;
		padding-bottom: 4%;
		border-bottom: 1px dashed #CBEBFC;
	}

	.breadcrumb {
	    font-size: 67%;
	}












/*
----------------------------------------------------------------------------------------
  ページャー
----------------------------------------------------------------------------------------
*/

	.pagenavi {
		width: 100%;
		margin-top: 0%;
	}

	.prev, .next {
		width: 100%;
		height: auto;
		margin-bottom: 4%;
		line-height: 1.3;
		float: none;
	}

	.prev a, .next a {
		width: 96%;
		height: auto;
		padding: 4% 2%;
		text-align: left;
	}

	.next a {
		width: 96%;
		height: auto;
		padding: 4% 2%;
		text-align: right;
	}






/*
----------------------------------------------------------------------------------------
  single author
----------------------------------------------------------------------------------------
*/

	.date_author_box {
		width: 100%;
		height: auto;
		padding: 0 3%;
		box-sizing: border-box;
	}

	.single_date p {
		line-height: 2;
	}

	.mini_author img {
		width: 50px;
		height: 50px;
		vertical-align: top;
	}













/*-------------------------- text_css --------------------------*/



	/*
	----------------------------------------------------------------------------------------
	  sp_clearfix
	----------------------------------------------------------------------------------------
	*/
	.sp_clearfix:after{
		content: ".";
		display: block;
		height: 0;
		font-size:0;
		clear: both;
		visibility:hidden;
	}

	.sp_clearfix {display: inline-block;}
	/* Hides from IE Mac */
	* html .clearfix {height: 1%;}
	.sp_clearfix {display:block;}
	/* End Hack */


}