/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 320px/*576px*/;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {font-size:14px !important;/* 定義:1rem=16px */;color: #333} 
/*
@media screen and (max-width:575px) {
html {font-size: 14px;} 
}
*/
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;padding: 0;
  font-family: Noto Sans CJK JP, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: #4F4F4F;
  text-align: left;
  background-color: #fff;
}

.container {max-width:500px !important;margin-left:auto;margin-right: auto;}
a.Cblue {color:#4ACDD5 !important;}


header {height:60px;position:fixed;top:0;width:100%;border-bottom: 1px solid #E7E9EB;background: #fff;z-index:999;}
header a.header-search {position:absolute;top: 16px;left:16px;width: 44px;height: 44px;z-index:1001;}
header a.header-brand {position:absolute;top: 13px;width: calc(100% - 4em);padding-left:4em;text-align: center;}
img.main-img {width: 100% !important;max-width: 100%;border-radius: 10px; }
.top-menu {margin-top:80px;}

/* 横並びメニュー */
    .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
	  padding-left:3%;
    }
    ::-webkit-scrollbar {
      display: none;
      -webkit-appearance: none;
    }
    .item, .itemicon {
      display: inline-block;
    }
    .item a, .itemicon a {
      text-decoration: none;
    }
    .line_navlist {
	width: 100vw;overflow: hidden;margin-top: 1rem !important;
    }
    .line_navlist .item {
	line-height:1;margin-right:1.4em;
    }

    .line_navlist .item a:hover,
	.line_navlist .item a.selected{
	font-weight: bold;text-decoration: none;
    }
    .line_navlist .item a:hover::after,
	.line_navlist .item a.selected::after{
    content: '';
    display: block;
    background:#A9E1E5;
    height: 3px;
    width: 70%;
	margin-left: 15%;
	margin-top: 0.5em
	}
.line_navlist li {margin-right:0.5em;padding: 0;}
/* /横並びメニュー */

.icon_navlist {width: 100vw;padding:0;margin-top: 1.5rem !important;}
.icon_navlist li {margin-right:0.2em;padding: 0;}
#kadomaru_navlist ul {margin:0;padding: 0;}
#kadomaru_navlist li {margin-bottom:0.4em;margin-right:0.1em;padding: 0;}
#kadomaru_navlist li a {padding:0.5em 1em;border-radius:30px;background:#F4F6F8;display:inline-block;}
#kadomaru_navlist li a:hover {background:#4F4F4F;color:#F4F6F8;text-decoration: none;}

.grybox select::-ms-expand {
	display: none;
}
.grybox select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 7px 30px 7px 10px;
	line-height: 1.1em;
	height: 3em;
	border-radius: 5px;
	border: none;
	background:#E7E9EB url("../images/arw.svg");
	background-repeat: no-repeat;
	background-size: 19px 10px;
	background-position: right 10px center;
}


.bg_gray {background: #F4F6F8}
.bg_white {background: #ffffff}
.bg_gray .card .card-title:before,.bg_gray .card .card-title:after {background: #F4F6F8}
.bg_white .card .card-title:before,.bg_white .card .card-title:after {background: #ffffff}


.card .card-title {
  height:3em;text-align: justify;text-justify: inter-ideograph;overflow: hidden;
  position: relative;font-weight: bold;
}
.card .card-title:before, .card .card-title:after {
  background:inherit;
  position: absolute;
}
.card .card-title:before {
  content: "...";
  top: 1.25em;
  right: 0;
}
.card .card-title:after {
  content: "";
  height: 100%;
  width: 100%;
}

.card {border: 0;overflow: hidden;width: 100%;}
.card a {cursor: hand}
.card a:hover {text-decoration: none}
.card-body {padding: 0 !important;margin:0.5em 0;}
.card-category {color: #979797;}
.card-body .media {position: relative;}
.card-body .media img {width:25%;}
.media-body {position: absolute;left: 50%;top: calc(25% - 0.5rem);margin-left: calc(-25% + 1rem);margin-top:0;}
.username {color:#979797;}
.likethis {color:#FF8793}

i.fa-home {color: #D9DBDD;margin-right:0.4em}
.iconlist {color: #4f4f4f}
.iconlist i {color: #D9DBDD;padding-right:0.4em}





/* フォントサイズ */
#kadomaru_navlist li a {font-size:0.8rem !important;}
.item, .itemicon {font-size:0.9rem !important;}
.card .card-title {font-size:0.8rem !important;}
.username {font-size:0.9rem !important;}
.likethis {font-size:0.8rem !important;}
.card-category {font-size:0.7rem !important;}
.comment-btns {font-size:0.8rem !important;}
.recipe_step .num_step  {font-size:1.6rem}
.form-group textarea{padding:1rem; font-size:0.9rem}
.form-group input {padding:1.5rem 1rem; font-size:0.9rem}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;line-height: 1.5 !important;
}

h1, .h1 {
  font-size:0.5rem !important;line-height: 1 !important
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.3rem !important;
  font-weight: bold;
}

h4, .h4 {
  font-size: 1.3rem !important;
}

h5, .h5 {
  font-size: 1rem !important;
}

h6, .h6 {
  font-size: 1rem;
}
p {font-size: 1.1rem !important}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size:0.8rem !important;
}

.bold {font-weight: bold;}
h3.fs_3 {font-size:1rem !important}
.fs_4 {font-size:1.5rem}
.fs_5, .comment-text {font-size:0.9rem !important}
.comment-meta {font-size:0.8rem !important}

h4.h4_pink {padding:0.3rem 1rem;border-left:2px solid #FF8793;margin-top:2.5rem;margin-bottom:2rem;color:#4F4F4F}

ul.recipe { padding-left: 0px;}
ul.recipe li {list-style: none;text-indent: 0;border-bottom: 1px solid #D9DBDD;padding-top: 0.5rem;padding-bottom: 0.5rem;font-size: 1rem !important}
ul.recipe li span {display:inline-block;text-align: right;float: right}

.recipe_step {border-bottom: 1px solid #D9DBDD;margin:1rem 0 !important;padding:1rem 0;}
.recipe_step .num_step  {font-weight: bold;}


li.comment{list-style: none;}

.good, .reply{padding-left:1em;}
.author-name {font-weight:bold}


/* コメント欄 */
.comment_box {
  display: flex;
  width:100%;
  padding:1rem 0;
}
.comment_box.reply {
  width:calc(100% - 30px);
  margin-left:30px;
}
.comment-left {
}
.comment-right {
  width: 100%;
}
img.comment-avatar {
  width:40px;
  height:auto;
}
.comment-avatar {
  margin-right:1.5rem;
}
.comment-btns {
  text-align: right;
}
.comment-btns i {
  margin-right:0.5rem;
}
.comment-button{
  margin-right:1rem;
}
a.comment-button {color:#4ACDD5 !important;font-weight: normal}
/*
.comment-button:not(:last-child) {
  margin-right:1rem;
}*/

/* カテゴリ追加 */
/* 親の[ul] */
.syncer-acdn-parent
{
	width: 100% ;
	margin: 1.5em 0 0 ;
	padding: 12px 0 ;
}

/* 子の[ul] */
.syncer-acdn-child
{
	display: none ;
}

/* 余白設定 */
.syncer-acdn-child ,
.syncer-acdn-parent li ,
.syncer-acdn-parent li p
{
	margin: 0 ;
	padding: 0 ;
}

/* 親と子の[li] */
.syncer-acdn-parent li
{
	list-style: none ;
}


/* 親の[a] */
.syncer-acdn-parent li p a
{
	position: relative ;
	top: 0 ;
	left: 0 ;
}

.syncer-acdn-parent li p a:after ,
.syncer-acdn-parent li p a:hover:after
{
	color: #333 ;
}

.syncer-acdn-parent li p a:after
{
  position: absolute;
  content: "";
  top: 50%;
  right:16px;
  width:21px;
  height:10px;
  margin-top: -5px;
  background: url("../images/arrow_down.png") top left no-repeat;
  background-size:21px 10px;
}


/* 親の[a]と子の[li] */
.syncer-acdn-parent li p a ,
.syncer-acdn-child li
{
	border-bottom: 1px solid rgba( 0,0,0, 0.1 ) ;padding-left: 1rem;
}


/* 親と子の[a] */
.syncer-acdn-parent li a
{
	display: block ;
	padding: 8px 0 ;
	/*font-weight: 700 ;*/
	text-decoration: none ;
}

.syncer-acdn-parent li a:hover
{
	cursor: pointer ;
	/*background: rgba( 0,0,0, 0.1 ) ;*/
}

/* チェックボックス */
.chkrow {position: relative;height:3rem;}
.chkrow label {/*font-weight: bold;*/padding-top:0.6rem}
.chkrow input[type=checkbox] {display: none;}
.chkbox {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding:5px 1rem;
    /*position: relative;
    width: auto;*/
    width: 100%;
}
.chkbox::before {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #D9DBDD;
    content: '';
    display: block;
    height:25px;
    right:15px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
    width:25px;
}
.chkbox::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';
    display: block;
    height: 15px;
    right:23px;
    margin-top: -8px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width:7px;
}
.chkrow input[type=checkbox]:checked + .chkbox::after {opacity: 1;}
.chkrow input[type=checkbox]:checked + .chkbox::before {background:#4ACDD5;border: 1px solid #4ACDD5;}

#preview_close {
		position:absolute;
		top:-1rem;
		right:12px;
		border:0;
		margin:0;
		padding:0;
		cursor:pointer;
  z-index: 99999;
	}
a#preview_close {
	font-size:2rem;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #4ACDD5
	}
#preview_close:hover{
		/*background-color:#aaa;*/
	}
}