@charset "utf-8";
/*
Theme Name:		ととまる
Description:	
Version:		1.0
License:		
License URI:	
Tags:			
*/
/* --------------------------------------------------------------------------------
	Single
-------------------------------------------------------------------------------- */
.entry {
	padding: 60px 0 120px;
}
h2.content-ttl {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 24px;
	margin: 0 0 40px;
	padding: 0 0 10px;
	border-bottom: 1px solid #eee;
}
h2.content-ttl .date {
	font-size: 14px;
	margin: 0 0 0 10px;
}
.entry img {
	max-width: 100% !important;
	height: auto !important;
}
.the_content {
	margin: 40px 0 0;
}
.the_content img {
	max-width: 100%;
	height: auto;
}
/********** 次の記事・前の記事 **********/
.page-nav {
    width: calc(75% - 80px / 2);
}
.prev-next {
	list-style: none;
	margin: 80px 0 0 0;
	padding: 0;
	text-align: center;
}
.prev-next:nth-of-type(1) {
	margin: 80px 0;
}
.prev-next > li {
	display: inline-block;
	color: #ccc;
	font-size: 12px;
	font-weight: bold;
}
.prev-next > li:nth-child(2) {
	margin-left: 80px;
}
.prev-next > li > a {
	color: #1B224C;
	;
	text-decoration: none;
}
.entry-item-img {
	width: 100%;
	position: relative;
}
.entry-item-img::before {
	content: "";
	display: block;
	padding-top: calc(1.4 / 1 * 100%);
}
.entry-item-img img {
	-o-object-position: center;
	height: 100%;
	left: 50%;
	object-position: center;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	object-fit: cover;
	-o-object-fit: cover;
}
/* --------------------------------------------------------------------------------
	archive
-------------------------------------------------------------------------------- */
.entry {
	width: 1000px;
	margin: 0 auto;
}
.entry-list {
	display: flex;
	flex-wrap: wrap;
}
.entry-list li {
	margin: 0 0 30px;
	border-bottom: 1px solid #eee;
	width: calc(25% - 50px * 3 / 4);
}
.entry-list li:not(:nth-child(4n + 1)) {
	margin-left: 50px;
}
.entry-list li:nth-child(n + 5) {
	margin-top: 50px;
}
h2.entry-ttl {
	font-size: 16px;
	margin: 0 0 20px;
}
.entry-list .date {
	font-size: 14px;
	margin: 17px 0 10px;
}
/* サムネイル */
.list-thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.list-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/********** パンくずリスト **********/
#breadcrumbs {
	background: #434343;
}
.breadcrumbs {
	width: 1200px;
	background: #434343;
	color: #fff;
	margin: 0 auto 30px;
	text-align: left;
	padding: 12px;
	font-size: 12px;
}
.breadcrumbs a {
	color: #fff;
	font-size: 12px;
}
.breadcrumbs a:link, .breadcrumbs a:visited {
	color: #fff;
}
.breadcrumbs a:hover, .breadcrumbs a:active {
	color: #fff;
}


.entry__box {
	display: flex;

}
.news-list {
    width: calc(75% - 80px / 2);
    background: #ffffff9c;
    padding: 35px;
    border-radius: 10px;
}
.entry__side {
    width: calc(25% - 20px / 2);
    margin-left: 50px;
}
.category__head {
	font-size: 20px;
	border: 2px solid #000;
	text-align: center;
}
.category__items {
	margin-top: 20px;
}
.category__item:not(:first-child) {
	margin-top: 10px;
}
.news__new-article {
	margin-top: 60px;
}
.new-article__head {
	font-size: 20px;
	border: 2px solid #000;
	text-align: center;
}
.new-article__items {
	margin-top: 40px;
}
.new-article__item:not(:first-child) {
	margin-top: 35px;
}
time.article-card-normal__published {
    padding: 7px 0 0;
    margin-bottom: 7px;
    display: block;
    font-size: 14px;
    border-bottom: solid 1px #b1b1b1;
}
.article-card__published {
	display: block;
	margin-top: 15px;
}
.article-card__img {
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.article-card__img::before {
	content: "";
	display: block;
	padding-top: calc(1.2 / 1 * 100%);
}
.article-card__img img {
	-o-object-position: center;
	height: 100%;
	left: 50%;
	object-position: center;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	object-fit: cover;
	-o-object-fit: cover;
}
.widget_archive {
	margin-top: 60px;
}
.widget-title {
	font-size: 20px;
	border: 2px solid #000;
	text-align: center;
}
.widget ul {
	margin-top: 20px;
}
.widget li:not(:first-child) {
	margin-top: 10px;
}

/* --------------------------------------------------------------------------------
	contact
-------------------------------------------------------------------------------- */
/*お問い合わせ*/
#contact {
	width: 800px;
	margin: 0 auto 100px;
}
#contact table input {
	border: none;
}
/*#contact table,#contact th,#contact td,#contact tr,#contact tbody{
	display: block;
	width: 100%;
	}*/
#contact table {
	width: 100%;
}
#contact table th {
	width: 25%;
	font-size: 17px;
	padding: 35px 0 10px;
	text-align: left;
	border-bottom: 1px solid #D5D5D5;
}
#contact table td {
	font-size: 17px;
	padding: 35px 0 10px;
	text-align: left;
	border-bottom: 1px solid #D5D5D5;
}
#contact table td input[type="text"] {
	display: block;
	background: #fff;
	padding: 1em;
}
#contact table td input[type="tel"] {
	display: block;
	background: #fff;
	padding: 1em;
}
#contact table td input[type="email"] {
	display: block;
	background: #fff;
	padding: 1em;
}
#contact table td .ss input[type="text"] {
	width: 10em;
	background: #fff;
	padding: 1em;
}
#contact table td .ll input[type="text"] {
	width: 100%;
	background: #fff;
	padding: 1em;
}
#contact table td textarea {
	width: 100%;
	background: #fff;
	padding: 1em;
	border: none;
}
#contact td p {
	margin: 0 0 10px;
}
.wpcf7-list-item {
	text-align: center;
	display: block;
	margin: 20px 0;
}
.wpcf7-spinner {
	visibility: hidden;
	display: block;
	background-color: #23282d;
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 auto;
	position: relative;
}
#contact .submit {
	text-align: center;
}
#contact .submit p {
	font-size: 14px;
	padding: 5px 0 0;
	text-align: center;
}
#contact .send {
	padding: 70px 0;
	text-align: center;
}
#contact .send p {
	font-size: 14px;
	padding: 5px 0 30px;
	text-align: center;
}
#contact .send input {
	display: inline-block;
	background: #1B224C;
	padding: 15px 5em 15px 6em;
	vertical-align: top;
	text-align: center;
	cursor: pointer;
	font-size: 20px;
	color: #fff;
}
#contact .code-att {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 20px;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------------
	レシピ
-------------------------------------------------------------------------------- */

#recipe-page h2{
	font-size: 30px;
	text-align: center;
	margin: 0 0 40px;
}



#recipe-page ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}


#recipe-page ul li{
	width: 31%;
	margin: 0 20px 60px 0;
}

#recipe-page ul li:nth-child(3n){
	width: 31%;
	margin: 0 0 60px;
}

#recipe-page h3.entry-ttl{
	text-align: center;
	background-color:#B29B73;
	color: #fff;
	padding: 5px;
}

#recipe-page .thumb img{
	width: 100%;
	height: 205px;
	object-fit: cover;

}


.recipe-single .entry-list li {
    margin: 0 0 30px;
    border-bottom: 0px solid #eee;
}

.modaal-container {
	width: 800px;
	margin: 0 auto;
	
}
.modaal-content-container {
	padding: 0;
}

.modaal-close {
	display: none;
}


.modaal-content-container img {
	width: 100%;
	height: auto;
}
.modaal-content-container .txt_area {
	
	color: #5A431C;
	padding: 20px;
}
.modaal-content-container .ttl {
	font-size: 20px;
}
.modaal-content-container .txt {
	font-size: 36px;
	font-weight: 600;
	border-bottom: 2px dashed #707070;
}
.modaal-content-container h6 {
	background-color: #5A431C;
	font-weight: 600;
	color: #fff;
	border-radius: 26px;
	font-size: 17px;
	display: inline-block;
	padding: 0 20px;
	margin: 20px 0 5px;
}
.modaal-content-container .items, .modaal-content-container .step {
	padding-left: 10px;
}
.modaal-content-container .items li {
	width: 156px;
	display: inline-block;
	font-size: 17px;
	margin: 5px 0;
}
.modaal-content-container .step li {
	margin: 0 0 10px;
}
.modaal-content-container .gry {
	background-color: #EDEDED;
}
.modaal-content-container .no {
	color: #5a431c80;
	font-size: 20px;
	display: inline-block;
	padding-right: 10px;
}
.modaal-content-container li p {
	display: flex;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0px;
	word-spacing: 0px;
}



/* --------------------------------------------------------------------------------
		page_faq	
-------------------------------------------------------------------------------- */
#faq{
	padding: 30px 0 0;
	}

#faq .lead{
	padding: 20px 0 0;
	font-size: 14px;
	text-align: center;
	}


#faq .sub-nav {
	margin: 0 0 40px;
	
	
	}

#faq a{
	cursor:pointer;
	}



#faq .sub-nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	
	}


#faq .sub-nav ul li{
	margin: 40px 1em 0 0;
	border: 0;
	padding: 0;
	
	}


#faq .sub-nav ul li a{
	padding: 10px 28px 10px 18px;
	background: #B29B73;
	position: relative;
    display: inline-block;
	font-size:14px;
	color: #fff;
	
	}

#faq .sub-nav ul li a::before,
#faq .sub-nav ul li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}


#faq .sub-nav ul li a::before{
    right: 10px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#faq .sub-nav ul li a::after{
    right: 10px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}


#faq .title h2{
	color:#333;
	font-size:24px;
	border-bottom: 1px solid #C3C3C3;
	padding: 0 0 10px 0;
	}

#faq .title h2 span{
	display:block;
	color:#333;
	font-size:16px;
	padding: 0 0 10px;
	}

#faq .catname{
	font-size: 20px;
	margin: 0 0 40px;
	/*padding: 60px 0 0;*/
	
	}



#faq h3.qes{
	position: relative;
	margin: 0 0 20px;
	}

#faq h3.qes::before{
	content: 'Q';
	position: absolute;
	top:0;
	}

#faq h3.qes span{
	display: block;
	padding: 0 0 0 2em;
	font-size: 16px;
	}


#faq ul{
	padding: 0 0 60px 0;
	}


#faq ul li{
	padding: 20px 0 0;
	border-bottom: 1px solid #C3C3C3;
	
	}



#faq ul li .ans {
	position: relative;
	display: none;
	padding: 0 0 60px;
	}


#faq ul li .ans::before{
	content: 'A';
	position: absolute;
	top:0;
	color: #C3C3C3;
	font-size: 20px;
	
	}

#faq ul li .ans .ans-txt{
	display: block;
	padding: 0 0 0 2em;
	font-size: 14px;
	}

/* --------------------------------------------------------------------------------
		大口注文フォーム/largeorder-form	
-------------------------------------------------------------------------------- */
#l-odr-form .top-txt {
	text-align: center;
	font-size: 14px;
}
#l-odr-form {
	width: 800px;
    margin: 0 auto 100px;
}
#l-odr-form table {
	width: 100%;
}
#l-odr-form table th,
#l-odr-form table td {
    font-size: 17px;
    padding: 35px 10px 10px 0;
    text-align: left;
    border-bottom: 1px solid #D5D5D5;
	vertical-align: top;
}
#l-odr-form table th {
	width: 25%;
}
#l-odr-form .submit {
	text-align: center;
}
#l-odr-form .submit p {
    font-size: 14px;
    padding: 5px 0 0;
    text-align: center;
}
#l-odr-form table input {
	border:  none;
}
#l-odr-form table td input,
#l-odr-form table td select {
	background: #fff;
	padding: 1em;
	font-size: 1rem;
}
#l-odr-form table td select {
	width: 100%;
	cursor: pointer;
}
#l-odr-form table td textarea {
	width: 100%;
    background: #fff;
    padding: 1em;
    border: none;
}
#l-odr-form h1 {
	font-size: 26px;
    font-weight: 600;
    display: flex;
    align-items: center;
	padding: 10px 0 50px;
}
#l-odr-form h1:before,
#l-odr-form h1:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
#l-odr-form h1:before {
    margin-right: 1rem;
}
#l-odr-form h1:after {
    margin-left: 1rem;
}
#l-odr-form .add-box {
	display: inline;
}
#l-odr-form .add-box .wpcf7-list-item {
	text-align: left;
}